@koobiq/components 20.4.1 → 21.0.0

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

@@ -3,19 +3,18 @@
 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_packageConfig = require('../../package-config-BhU2TfC8.js');
+var signalMembersMigration = require('../../signal-members-migration-BoAJKutT.js');
+var templateRefAccess = require('../../template-ref-access-DLNoxmmG.js');
 var utils_typescript = require('../../utils/typescript.js');
 var migrations_alertSignals_data = require('./data.js');
 require('@angular-devkit/schematics');
 require('@schematics/angular/utility');
+require('../../utils/ast.js');
 
 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);
@@ -25,144 +24,87 @@ function applyEdits(content, edits) {
     }
     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);
+/** The `KbqAlert` receivers of a file, typed by annotation or `inject()`. */
+function collectFileReceivers(sourceFile) {
+    return { receivers: signalMembersMigration.collectAllReceivers(sourceFile, [migrations_alertSignals_data.ALERT_TYPE]), bindings: signalMembersMigration.collectBindings(sourceFile) };
 }
-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.
+ * Whether a property access reads from an alert receiver. The shared engine resolves the receiver at this
+ * exact position, so a nested declaration that shadows its name or a `function` that rebinds `this` is not
+ * followed. A signal query holds the instance behind a call of its own, which this pass does not reach.
  */
-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: '()' });
+function onReceiver(node, sourceFile, scope) {
+    const receiver = signalMembersMigration.resolveReceiver(node.expression, node, sourceFile, scope.receivers, scope.bindings);
+    return !!receiver && !receiver.signalQuery;
 }
 /** Collects edits for every read/write of a value-safe signal member on a known alert receiver. */
-function collectAccessEdits(sourceFile, receivers) {
+function collectAccessEdits(sourceFile, scope) {
     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);
+            onReceiver(node, sourceFile, scope)) {
+            // `KbqAlert` signal members are `input()`, so every write is left for the consumer and reported.
+            signalMembersMigration.classifyAccess(node, sourceFile, migrations_alertSignals_data.WRITABLE_MEMBERS, 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) {
+/** Whether a signal member is written rather than read, in any form: the migration leaves it for the consumer. */
+function isReadOnlyWrite(node) {
+    return migrations_alertSignals_data.SIGNAL_MEMBERS.includes(node.name.text) && !migrations_alertSignals_data.WRITABLE_MEMBERS.has(node.name.text) && signalMembersMigration.isWriteTarget(node);
+}
+/**
+ * Collects the manual-migration members (`alertColor`, now-`protected` queries, writes to read-only signal
+ * members) accessed on an alert receiver.
+ */
+function collectReceiverWarnings(sourceFile, scope) {
     const valueChanged = new Set();
     const protectedAccess = new Set();
+    const readOnlyWrites = new Set();
     const visit = (node) => {
-        if (ts.isPropertyAccessExpression(node) &&
-            ts.isIdentifier(node.name) &&
-            inReceiverScope(node, sourceFile, receivers)) {
+        if (ts.isPropertyAccessExpression(node) && ts.isIdentifier(node.name) && onReceiver(node, sourceFile, scope)) {
             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);
+            else if (isReadOnlyWrite(node))
+                readOnlyWrites.add(name);
         }
         node.forEachChild(visit);
     };
     visit(sourceFile);
-    return { valueChanged, protectedAccess };
+    return { valueChanged, protectedAccess, readOnlyWrites };
 }
 /** 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)
+    const scope = collectFileReceivers(sourceFile);
+    if (scope.receivers.length === 0)
         return content;
-    const edits = collectAccessEdits(sourceFile, receivers);
+    const edits = collectAccessEdits(sourceFile, scope);
     return edits.length > 0 ? applyEdits(content, edits) : content;
 }
+/** Reports writes to signal members that are read-only now, made in code or through a template reference. */
+function warnReadOnlyWrites(context, filePath, members) {
+    if (members.size === 0)
+        return;
+    utils_messages.logMessage(context.logger, [
+        `[alert-signals] ${filePath}`,
+        `  \`${[...members].join('`, `')}\` can no longer be assigned: they are read-only signal inputs now. Bind`,
+        `  them in the template (e.g. \`[compact]="…"\`) instead of assigning them.`
+    ]);
+}
 /** Emits precise, receiver-scoped warnings for the members that can't be auto-fixed. */
-function warnReceiverMembers(context, filePath, content) {
+function warnReceiverMembers(context, filePath, content, templateWrites) {
     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);
+    const { valueChanged, protectedAccess, readOnlyWrites } = collectReceiverWarnings(sourceFile, collectFileReceivers(sourceFile));
+    templateWrites.forEach((member) => readOnlyWrites.add(member));
+    warnReadOnlyWrites(context, filePath, readOnlyWrites);
     if (valueChanged.size > 0) {
         utils_messages.logMessage(context.logger, [
             `[alert-signals] ${filePath}`,
@@ -180,108 +122,35 @@ function warnReceiverMembers(context, filePath, content) {
         ]);
     }
 }
-/** 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 };
-}
+/** What a reference variable on `<kbq-alert>` reaches. */
+const REF_POLICY = { members: migrations_alertSignals_data.SIGNAL_MEMBERS, writable: migrations_alertSignals_data.WRITABLE_MEMBERS };
 /** Pass B (core) — parse a template, discover alert refs, rewrite their value-safe signal reads. */
 async function migrateTemplate(template) {
+    const untouched = { content: template, changed: false, readOnlyWrites: new Set() };
     if (!template.includes(migrations_alertSignals_data.ALERT_ELEMENT))
-        return { content: template, changed: false };
+        return untouched;
     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;
+        return untouched;
+    const { rootNodes } = parsed.tree;
+    // A bare `#ref` or one naming the alert; `#ref="ngModel"` names another directive.
+    const { content, readOnlyWrites } = templateRefAccess.rewriteRefAccesses(template, rootNodes, (element, value) => element.name === migrations_alertSignals_data.ALERT_ELEMENT && (!value || value === migrations_alertSignals_data.ALERT_EXPORT_AS) ? REF_POLICY : undefined);
+    return { content, changed: content !== template, readOnlyWrites };
 }
 /** 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);
+    const ranges = utils_typescript.collectInlineTemplateRanges(sourceFile).sort((a, b) => b.start - a.start);
+    const readOnlyWrites = new Set();
     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);
+        const outcome = await migrateTemplate(result.slice(start, end));
+        outcome.readOnlyWrites.forEach((member) => readOnlyWrites.add(member));
+        if (outcome.changed) {
+            result = result.slice(0, start) + outcome.content + result.slice(end);
         }
     }
-    return result;
+    return { content: result, readOnlyWrites };
 }
 function logWarnings(context, filePath, content) {
     for (const { pattern, message } of migrations_alertSignals_data.warnPatterns) {
@@ -305,9 +174,7 @@ function alertSignals(options) {
         const rootDir = root ? tree.getDir(root) : tree.root;
         const tsPaths = [];
         const htmlPaths = [];
-        rootDir.visit((filePath) => {
-            if (filePath.includes('node_modules') || filePath.includes('/dist/'))
-                return;
+        utils_packageConfig.visitProjectFiles(rootDir, (filePath) => {
             if (filePath.endsWith(TS_EXT))
                 tsPaths.push(filePath);
             else if (filePath.endsWith(HTML_EXT))
@@ -330,16 +197,16 @@ function alertSignals(options) {
             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);
+            const inline = await migrateInlineTemplates(migrateTsExpressions(original, filePath), filePath);
+            warnReceiverMembers(context, filePath, original, inline.readOnlyWrites);
+            commit(filePath, original, inline.content);
         }
         for (const filePath of htmlPaths) {
             const original = tree.read(filePath)?.toString();
             if (!original)
                 continue;
-            const { content, changed } = await migrateTemplate(original);
+            const { content, changed, readOnlyWrites } = await migrateTemplate(original);
+            warnReadOnlyWrites(context, filePath, readOnlyWrites);
             if (changed)
                 commit(filePath, original, content);
         }

package/schematics/migrations/angular-animations-removal/README.md

@@ -0,0 +1,46 @@
+# angular-animations-removal
+
+Migration schematic invoked automatically by `ng update @koobiq/components@21`
+(registered for `21.0.0-0`). Reports the uses of the animation triggers the library exported and of the
+members that carried an `AnimationEvent`. It never writes to the tree.
+
+## Background
+
+Koobiq components no longer use `@angular/animations`, which Angular deprecated. They animate with CSS,
+wait for the end of an animation themselves, and skip the motion under `prefers-reduced-motion: reduce`
+or `KBQ_ANIMATIONS_CONFIG`. `@angular/animations` is no longer a peer dependency, and an application no
+longer needs `provideAnimations()` for the components.
+
+## What it does _not_ do
+
+Nothing is rewritten: what replaces a member depends on what the code did with the event.
+
+| Pattern                                                                                                          | Manual migration                                                              |
+| ---------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `fadeAnimation`, `kbqSelectAnimations`                                                                           | Animate with CSS, or `animate.enter` / `animate.leave`                        |
+| `kbqDropdownAnimations`, `fadeInItems`, `transformDropdown`                                                      | Remove: the dropdown panel no longer animates                                 |
+| `kbqTabsAnimations`                                                                                              | Remove: a tab body translates with a CSS transition                           |
+| `kbqPopoverAnimations`, `kbqDatepickerAnimations`, `KbqNotificationCenterAnimations`, `kbqAppSwitcherAnimations` | Animate with CSS, or `animate.enter` / `animate.leave`                        |
+| `MODAL_ANIMATE_DURATION`                                                                                         | `afterOpen` / `afterClose` of `KbqModalRef` instead of a timer                |
+| `KbqSidepanelAnimationState`                                                                                     | `afterOpened()`, `beforeClosed()`, `afterClosed()` of `KbqSidepanelRef`       |
+| `.animationStart()`, `.animationDone()` of a pop-up                                                              | Override the protected `afterShowAnimation()`                                 |
+| `isAnimating`, `panelAnimationState`, `startAnimation()`, `resetAnimation()`                                     | Remove; a custom dropdown trigger calls `setOpened()`                         |
+| `.animationDone.pipe()` / `.subscribe()` of a dropdown                                                           | `dropdownOpened` / `dropdownClosed` or `openedChange` of `KbqDropdownTrigger` |
+| `onAnimationStart`, `onAnimationDone`, `onAnimation`, `onTranslateTab*`                                          | `KbqSidebar.stateChanged`, `KbqTabGroup.animationDone`, the ref's outputs     |
+| `animationStateChanged`                                                                                          | The ref: `afterOpened()`, `beforeClosed()`, `afterClosed()`                   |
+| `animationState`, `animationTransform`, `setAnimationState()`                                                    | The ref's outputs; `KbqSidebar.stateChanged`                                  |
+| `contentAnimationState` of `KbqContentPanelContainer`                                                            | `isOpened()`                                                                  |
+| `KbqToastService.animation`                                                                                      | Remove: the overlay detaches once the last exit has ended                     |
+| `NoopAnimationsModule`, `provideNoopAnimations()`                                                                | `{ provide: KBQ_ANIMATIONS_CONFIG, useValue: { animationsDisabled: true } }`  |
+| `provideAnimations()`, `provideAnimationsAsync()`, `BrowserAnimationsModule`                                     | Remove, unless the application declares `animations: [...]` itself            |
+
+A pattern that does not name Koobiq itself is checked only in a file that also names the component it is
+about — its entry point, one of its `Kbq…` / `kbq…` symbols or its element — so an application component
+that declares its own `isAnimating` or `onAnimationDone()` stays quiet. Angular's animation providers and
+modules are reported wherever they appear: `app.config.ts` and a spec seldom name a Koobiq component.
+
+## Running it manually
+
+```
+ng generate @koobiq/components:angular-animations-removal --project my-app
+```

package/schematics/migrations/angular-animations-removal/data.js

@@ -0,0 +1,150 @@
+'use strict';
+
+/**
+ * Data for the `angular-animations-removal` migration.
+ *
+ * Koobiq components no longer use `@angular/animations`: they animate with CSS and wait for its end
+ * themselves. The animation triggers they exported and the members that carried an `AnimationEvent` are
+ * removed. Warn-only: what replaces a member depends on what the code did with the event.
+ */
+/**
+ * A file that imports the entry point, names one of its `Kbq…` / `kbq…` symbols or renders its element. The stem
+ * ends at a capital or at the end of the word, so `Tab` does not take `KbqTable`.
+ */
+const owner = (entryPoint, stem, element = entryPoint) => String.raw `@koobiq/components/${entryPoint}\b|\b[Kk]bq${stem}(?:[A-Z]\w*)?\b|<kbq-${element}\b`;
+const DROPDOWN = owner('dropdown', 'Dropdown');
+const SIDEBAR = owner('sidebar', 'Sidebar');
+const TABS = owner('tabs', 'Tabs?', 'tab');
+const TOAST = owner('toast', 'Toast');
+const SIDEPANEL = owner('sidepanel', 'Sidepanel');
+const ACTIONS_PANEL = owner('actions-panel', 'ActionsPanel');
+const CONTENT_PANEL = owner('content-panel', 'ContentPanel');
+const MODAL = owner('modal', 'Modal');
+const POP_UP = [
+    String.raw `\bKbqPopUp\w*`,
+    owner('tooltip', 'Tooltip'),
+    owner('popover', 'Popover'),
+    owner('app-switcher', 'AppSwitcher'),
+    owner('notification-center', 'NotificationCenter')
+].join('|');
+/**
+ * The anchor is left out where the pattern names Koobiq alone, and for Angular's animation providers, which
+ * `app.config.ts` and specs declare without naming a component.
+ */
+const warnPatterns = [
+    {
+        // kbqSelectAnimations is ours whatever the file imports it from.
+        anchor: String.raw `@koobiq/components/core\b|\bkbqSelectAnimations\b`,
+        pattern: '\\b(fadeAnimation|kbqSelectAnimations)\\b',
+        message: 'fadeAnimation and kbqSelectAnimations were removed from @koobiq/components/core: the components no ' +
+            'longer declare @angular/animations triggers. Animate your own elements with CSS, or with ' +
+            '`animate.enter` / `animate.leave` in the template.'
+    },
+    {
+        anchor: DROPDOWN,
+        pattern: '\\b(kbqDropdownAnimations|fadeInItems|transformDropdown)\\b',
+        message: 'kbqDropdownAnimations, fadeInItems and transformDropdown were removed from @koobiq/components/dropdown: ' +
+            'the panel opens and closes without an animation.'
+    },
+    {
+        pattern: '\\bkbqTabsAnimations\\b',
+        message: 'kbqTabsAnimations was removed from @koobiq/components/tabs: a tab body translates with a CSS ' +
+            'transition that lasts `animationDuration`.'
+    },
+    {
+        pattern: '\\b(kbqPopoverAnimations|kbqDatepickerAnimations|KbqNotificationCenterAnimations|' +
+            'kbqAppSwitcherAnimations)\\b',
+        message: 'kbqPopoverAnimations, kbqDatepickerAnimations, KbqNotificationCenterAnimations and ' +
+            'kbqAppSwitcherAnimations were removed from @koobiq/components/popover, /datepicker, ' +
+            '/notification-center and /app-switcher: their panels animate with CSS. Animate your own elements ' +
+            'with CSS, or with `animate.enter` / `animate.leave` in the template.'
+    },
+    {
+        anchor: MODAL,
+        pattern: '\\bMODAL_ANIMATE_DURATION\\b',
+        message: 'MODAL_ANIMATE_DURATION was removed from @koobiq/components/modal: the dialog animates with CSS and ' +
+            'waits for the end of the animation itself. Instead of a timer of that length, act on afterOpen / ' +
+            'afterClose of the KbqModalRef.'
+    },
+    {
+        pattern: '\\bKbqSidepanelAnimationState\\b',
+        message: 'KbqSidepanelAnimationState is no longer exported from @koobiq/components/sidepanel. Follow a sidepanel ' +
+            'through KbqSidepanelRef: afterOpened(), beforeClosed() and afterClosed().'
+    },
+    {
+        anchor: POP_UP,
+        pattern: '\\.(animationStart|animationDone)\\s*\\(',
+        message: 'KbqPopUp.animationStart() and animationDone() were removed: a pop-up animates in with CSS. A subclass ' +
+            'acting once it has appeared overrides the protected afterShowAnimation() instead.'
+    },
+    {
+        anchor: DROPDOWN,
+        pattern: '\\b(isAnimating|panelAnimationState|startAnimation|resetAnimation)\\b',
+        message: 'KbqDropdown lost isAnimating, panelAnimationState, startAnimation() and resetAnimation() along with ' +
+            'animationDone: the panel no longer animates, so it is closed as soon as the trigger reports it, and a ' +
+            'custom trigger tells it about an attached panel with setOpened().'
+    },
+    {
+        anchor: DROPDOWN,
+        pattern: '\\.animationDone\\s*\\.\\s*(pipe|subscribe)\\b',
+        message: 'KbqDropdown.animationDone was removed: the panel no longer animates, so the trigger attaches and ' +
+            'detaches it at once. Listen to the dropdownOpened / dropdownClosed outputs of KbqDropdownTrigger, or ' +
+            'its openedChange, which emit right after. The animationDone of KbqTabGroup and of the actions panel ' +
+            'container stays: ignore this for them.'
+    },
+    {
+        anchor: [DROPDOWN, SIDEBAR, TABS, TOAST, SIDEPANEL, ACTIONS_PANEL].join('|'),
+        pattern: '\\b(onAnimationStart|onAnimationDone|onAnimation|onTranslateTabStarted|onTranslateTabComplete)\\b',
+        message: 'The animation callbacks taking an AnimationEvent were removed (KbqDropdown, KbqSidebar, KbqTabBody, ' +
+            'KbqToastComponent, the sidepanel and actions panel containers). Use the outputs instead: ' +
+            'KbqSidebar.stateChanged, KbqTabGroup.animationDone, and the afterOpened() / afterClosed() of a ref.'
+    },
+    {
+        anchor: [SIDEPANEL, ACTIONS_PANEL].join('|'),
+        pattern: '\\banimationStateChanged\\b',
+        message: 'animationStateChanged no longer emits an AnimationEvent: the actions panel container emits the state ' +
+            'it reached through animationDone, and the one of the sidepanel container is internal. Follow both ' +
+            'through their ref: afterOpened(), beforeClosed() and afterClosed().'
+    },
+    {
+        anchor: [SIDEPANEL, SIDEBAR, TOAST].join('|'),
+        pattern: '\\b(setAnimationState|animationTransform)\\b|\\.animationState\\b',
+        message: 'The animation state of KbqSidepanelContainerComponent (animationState, animationTransform, ' +
+            'setAnimationState()), KbqSidebar and KbqToastComponent was removed. Follow a sidepanel through ' +
+            'KbqSidepanelRef: afterOpened(), beforeClosed() and afterClosed(); a sidebar through stateChanged. ' +
+            'Ignore this if animationState is a member of your own component.'
+    },
+    {
+        anchor: CONTENT_PANEL,
+        pattern: '\\bcontentAnimationState\\b',
+        message: 'KbqContentPanelContainer.contentAnimationState was removed with the @contentAnimation trigger it fed: ' +
+            'the content makes room for the opened panel with a CSS transition. Read isOpened() for the state of ' +
+            'the panel.'
+    },
+    {
+        anchor: TOAST,
+        pattern: '\\.animation\\s*\\.\\s*(pipe|subscribe|next)\\b',
+        message: 'KbqToastService.animation (and KbqToastStack.animation) were removed: a toast plays its exit animation ' +
+            'before it is taken out, and the overlay detaches once the last exit has ended.'
+    },
+    {
+        pattern: '\\b(NoopAnimationsModule|provideNoopAnimations)\\b',
+        message: 'Koobiq components still skip their motion under NoopAnimationsModule / provideNoopAnimations(), but ' +
+            'that is @angular/animations, which is deprecated: provide ' +
+            '`{ provide: KBQ_ANIMATIONS_CONFIG, useValue: { animationsDisabled: true } }` from ' +
+            '@koobiq/components/core instead. In jsdom nothing animates either way.'
+    },
+    {
+        pattern: '\\b(provideAnimations|provideAnimationsAsync|BrowserAnimationsModule)\\b',
+        message: 'Koobiq components no longer need Angular animations. Remove the provider, and @angular/animations, ' +
+            'unless the components of the application declare `animations: [...]` themselves.'
+    }
+];
+const SUMMARY = [
+    'Koobiq components animate with CSS and no longer depend on @angular/animations, see "Animations without',
+    '@angular/animations" in the migration guide. A spec that waited for an animation callback now waits for the',
+    'next render: fixture.detectChanges() or await fixture.whenStable().'
+];
+
+exports.SUMMARY = SUMMARY;
+exports.warnPatterns = warnPatterns;

package/schematics/migrations/angular-animations-removal/index.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var warnOnlyMigration = require('../../warn-only-migration-BISJBODk.js');
+var migrations_angularAnimationsRemoval_data = require('./data.js');
+require('../../utils/messages.js');
+require('../../package-config-BhU2TfC8.js');
+require('@angular-devkit/schematics');
+require('@schematics/angular/utility');
+
+/**
+ * Reports the uses of the removed animation triggers and of the members that carried an `AnimationEvent`.
+ * Never writes: what replaces a member depends on what the code did with the event.
+ */
+function angularAnimationsRemoval(options) {
+    return warnOnlyMigration.warnOnlyRule({ label: '[angular-animations-removal]', warnPatterns: migrations_angularAnimationsRemoval_data.warnPatterns, summary: migrations_angularAnimationsRemoval_data.SUMMARY }, options);
+}
+
+exports.default = angularAnimationsRemoval;

package/schematics/migrations/angular-animations-removal/schema.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "koobiq-components-angular-animations-removal",
+    "title": "Koobiq components @angular/animations removal migration",
+    "type": "object",
+    "properties": {
+        "project": {
+            "type": "string",
+            "description": "Name of the project to inspect. If omitted, the migration runs over the whole tree.",
+            "$default": {
+                "$source": "projectName"
+            }
+        }
+    }
+}