@design-factory/angular 21.1.0 → 22.0.0-next.0

package/schematics/component-migration/ai/prompt.md

@@ -0,0 +1,83 @@
+Please finish the Design Factory component migration in my current working tree.
+
+The deterministic Design Factory migration schematics have already run.
+
+## Inputs
+
+Use my current working tree and current git diff as the migration source of truth.
+
+Read every component guide in this generated migration folder before editing:
+
+- `.df-migration/*/guide.md`
+
+Use the installed package source code as the API and behavior source of truth when it is available. In workspaces with
+more than one `node_modules`, use the package instance that the migrated project would resolve, preferring the closest
+applicable `node_modules` from the project or workspace path:
+
+- legacy components and schematics: `node_modules/@design-factory/design-factory`;
+- legacy ng-bootstrap behavior: `node_modules/@ng-bootstrap/ng-bootstrap`;
+- new Angular components: `node_modules/@design-factory/angular`;
+- shared component behavior, when available in the installed package graph: `node_modules/@design-factory/*`.
+
+If there is any doubt about how a legacy or new component works, or if a migration decision depends on component
+behavior, inspect the actual implementation and TypeScript declaration files before editing. If the relevant package
+source is not available locally, use the available typings and generated guides, keep ambiguous cases unresolved, and
+report the missing source in the final summary.
+
+The deterministic migration may have:
+
+- rewritten safe mechanical template and TypeScript usages;
+- added standalone imports;
+- added `TODO(df-migration ...)` comments for cases that need AI or manual review.
+
+## Rules
+
+- Preserve user code and unrelated behavior.
+- Treat staged changes, if any, as deterministic migration output that is already prepared for review.
+- Make all AI-assisted follow-up edits in the unstaged working tree only.
+- Do not stage, commit, stash, reset, revert, or otherwise change git state unless I explicitly ask.
+- Do not undo deterministic schematic edits unless they are clearly incorrect.
+- Treat my current git diff as intentionally reviewable. If I have removed or reverted a hunk, do not reintroduce it
+  without a clear reason.
+- Resolve only component migrations that have generated guides under `.df-migration/*/guide.md` unless I explicitly ask
+  for a broader cleanup.
+- Prefer small local edits over broad refactors.
+- Do not reformat files globally and do not run formatters unless I explicitly ask.
+- Keep formatting-only edits limited to migration-touched lines, such as removing blank lines left by schematic edits.
+- Do not migrate unit tests, e2e tests, page objects, snapshots, or test-only selectors unless I explicitly ask for test
+  migration. If tests still reference legacy component selectors or CSS classes, report them as follow-up work.
+- Resolve API and behavior questions from component source code and typings, not from assumptions.
+- Do not leave empty named import declarations such as `import {} from '...';`. If removing named imports leaves no
+  imported symbols, remove the whole import declaration.
+- Verify every `TODO(df-migration ...)` comment and remove it only when the underlying issue is actually resolved.
+- Preserve every `TODO(df-migration ...): [human] ...` comment itself. `[human]` means the case must stay visible for
+  human review; it does not automatically forbid AI-assisted edits. You may improve the surrounding code when the
+  component guide gives a safe path and the intent is clear, but keep the `[human]` TODO so a human can verify the
+  result. If the component guide explicitly says to leave a pattern unchanged or out of scope, follow that stricter
+  instruction.
+- If a component guide says a TODO must be preserved or excluded from AI migration, leave that TODO unchanged.
+- Leave unresolved TODOs in place when the required behavior is ambiguous.
+- Preserve custom classes, event handlers, ARIA attributes, router directives, form attributes, and test selectors unless
+  the component guide explicitly says to change them.
+- When imports are changed, remove old imports only after confirming there are no remaining references.
+
+## Suggested Workflow
+
+1. Inspect `git diff`.
+2. Find `TODO(df-migration ...)` comments and remaining legacy APIs for guided components.
+3. Read the relevant component guide sections for each TODO code or legacy API.
+4. Make the smallest code changes needed to finish the migration.
+5. Run the narrowest useful validation for touched files or projects when the command is clear.
+6. Report unresolved TODOs, known remaining legacy usages, and validation results.
+
+## Validation
+
+Use validation commands already defined by the client project. Validation is best effort: if a command fails, report the
+command and the relevant failure summary, but do not assume the whole migration is invalid.
+
+Prefer narrow TypeScript compilation or typecheck commands for the touched project when available. Run narrow build,
+unit, or e2e commands only when the command is clear and appropriately scoped. If a full build is broad, slow, or known
+to fail for unrelated reasons, do not run it unless I explicitly ask.
+
+Only fix validation failures that are clearly caused by the component migration and are in migration-owned source files.
+Do not fix unrelated failures, and do not update tests/page objects unless I explicitly ask for test migration.

package/schematics/component-migration/alert/guide.md

@@ -0,0 +1,246 @@
+# Alert Migration Guide
+
+This guide is used by AI-assisted migration after the deterministic `migrate-alert` schematic has run.
+
+Use it together with the user's current working tree and current git diff. The diff shows which safe changes were made
+by the schematic and which `TODO(df-migration ...)` comments still need review.
+
+## Legacy API
+
+Legacy alerts are based on `ngb-alert` / `NgbAlert` from `@ng-bootstrap/ng-bootstrap/alert` or
+`@ng-bootstrap/ng-bootstrap`, often combined with legacy Design Factory helpers:
+
+- `DfAlertModule`
+- `NgbAlertConfig`
+- `dfInsertAlertIcon`
+- `DfInsertIconDirective`
+- `df-alert-sm`
+- `df-alert-lg`
+- `df-page-alert`
+- `df-card-alert`
+- `df-superheader`
+- `df-alert-collapse-main-text`
+- `df-alert-collapsed-text`
+
+Legacy collapsible alerts often use `NgbCollapse`, local collapsed state, and custom toggle buttons.
+
+## New API
+
+New alerts use standalone exports from `@design-factory/angular/alert`:
+
+```ts
+import { DfAlert, DfAlertDetails, DfAlertTitle, provideDfAlertConfig } from '@design-factory/angular/alert';
+```
+
+Common template forms:
+
+```html
+<df-alert type="warning" [dismissible]="true" (closed)="onClosed()">Alert content</df-alert>
+
+<df-alert expandable>
+  <df-alert-title>Alert title</df-alert-title>
+  <df-alert-details>Additional details</df-alert-details>
+</df-alert>
+```
+
+Supported alert types are `success`, `info`, `warning`, `danger`, and `tip`.
+
+Supported alert inputs and outputs include `type`, `appearance`, `size`, `animated`, `dismissible`, `expandable`,
+`expanded`, and `(closed)`.
+
+## Deterministic Schematic Changes
+
+The schematic handles these changes when the syntax is local and unambiguous:
+
+- `ngb-alert` -> `df-alert`
+- `dfInsertAlertIcon` removal
+- `[animation]` / `animation` -> `[animated]` / `animated`
+- `(close)` -> `(closed)`
+- static `df-alert-sm` / `df-alert-lg` -> `size`
+- static page/card alert classes -> `appearance="banner"` where supported
+- unsupported static alert types normalized to a supported value
+- `#alert="ngbAlert"` export removal
+- `NgbAlert` and `NgbAlertModule` import cleanup where safe
+- `NgbAlert` type references changed to `DfAlert`
+- TODO comments for cases that need review or AI/manual migration
+
+Do not repeat these changes unless the schematic missed a local occurrence.
+
+## TODO Codes
+
+TODO comments may include `[human]`.
+
+Verify every TODO and remove it only when the underlying issue is actually resolved. Preserve `[human]` TODO comments
+unchanged so a human can review them after the AI-assisted pass. `[human]` does not forbid AI-assisted edits around the
+comment when the intent is clear; it means the final result must remain visible for human verification.
+
+### `alert.review`
+
+The alert was migrated automatically. Verify behavior and visual appearance.
+
+Pay special attention to vertical spacing. Legacy `ngb-alert` inherited Bootstrap's default bottom margin, which was
+equivalent to `mb-5` / `var(--df-spacing-5)`. New `df-alert` does not set outer spacing; spacing belongs to the
+surrounding layout or the alert host.
+
+The deterministic schematic restores that spacing with `mb-5` for normal inline/content alerts when it can prove the
+alert has no bottom-margin utility, no dynamic class binding, and is not a legacy page/card banner alert.
+
+When reviewing spacing:
+
+- Keep deterministic `mb-5` when the migrated alert is a normal inline/content alert and the old `ngb-alert` bottom
+  margin should still separate it from the following content.
+- Add `mb-5` or equivalent layout spacing when the schematic could not do so automatically and the next element now
+  sits too close to the alert.
+- Do not add margin when the alert already has explicit margin classes such as `mb-*`, `my-*`, `m-*`, responsive margin
+  variants, or app-specific spacing classes.
+- Do not add margin to banner alerts, page-level alerts, card-edge alerts, or alerts intentionally flush with a
+  container edge.
+- Be careful in flex rows, modal footers, toolbars, inline status areas, and compact card headers; these often need
+  local layout-specific spacing rather than `mb-5`.
+- If the surrounding layout is ambiguous, leave the spacing unchanged and add a specific human TODO immediately above
+  the alert:
+
+```html
+<!-- TODO(df-migration alert.spacing-review): [human] Legacy ngb-alert had default bottom margin. Verify whether this migrated df-alert needs app/layout spacing. -->
+```
+
+After adding `alert.spacing-review`, remove `alert.review` only if all other review concerns for that alert are
+resolved.
+
+Keep or remove this TODO based on review. If no behavior issue is found, remove it.
+
+### `alert.spacing-review`
+
+This TODO may be added during AI-assisted review when the old Bootstrap bottom margin might matter but the surrounding
+layout is not clear enough to update automatically.
+
+Keep this TODO for human review. A human should either add the correct layout spacing or confirm the migrated alert is
+intentionally flush with the surrounding content.
+
+### `alert.dynamic-class`
+
+The alert has dynamic classes such as `[class]`, `[ngClass]`, or dynamic class bindings.
+
+Inspect the bound expression. If it can still produce legacy alert classes, convert the logic to new alert inputs such
+as `size`, `appearance`, or local component state. If the expression is unrelated to alert styling, leave it unchanged
+and remove the TODO.
+
+### `alert.dynamic-legacy-class`
+
+The alert has an explicit dynamic legacy class binding, for example `[class.df-alert-sm]`.
+
+Convert it to the corresponding new input logic when possible:
+
+- `df-alert-sm` -> `size="sm"` or `[size]="condition ? 'sm' : 'md'"`
+- `df-alert-lg` -> `size="lg"` or `[size]="condition ? 'lg' : 'md'"`
+- `df-page-alert` / `df-card-alert` -> `appearance="banner"` or equivalent conditional expression
+
+Preserve unrelated class logic.
+
+### `alert.page-level-layout`
+
+The alert used legacy `df-page-alert`, either statically or through `[class.df-page-alert]`.
+
+This TODO is marked `[human]` because the correct fix depends on the application shell and route layout.
+
+The schematic can map the visual banner treatment to `appearance="banner"`, but it does not migrate the legacy fixed
+positioning, top offset, or superheader-aware placement. New alerts should be positioned by the consuming application
+layout.
+
+Review the surrounding layout before removing this TODO:
+
+- If this is a global or page-level notification, prefer moving it into an app-owned alert/banner slot directly below
+  the top navigation or superheader.
+- If it must remain in the routed component, add app-owned positioning and offset styles in that app.
+- If the alert should now be inline content, keep the migrated `df-alert appearance="banner"` and remove the TODO after
+  confirming the behavior.
+
+### `alert.dynamic-type`
+
+The alert keeps a dynamic `[type]` binding.
+
+Confirm the expression only returns `success`, `info`, `warning`, `danger`, or `tip`. If it can return Bootstrap-only
+values such as `primary`, `secondary`, `light`, or `dark`, normalize them in TypeScript or template logic.
+
+### `alert.collapsible-pattern`
+
+Legacy collapsible markup was detected and not structurally migrated.
+
+Prefer the new expandable alert structure:
+
+```html
+<df-alert expandable [(expanded)]="expanded">
+  <df-alert-title>Title content</df-alert-title>
+  <df-alert-details>Details content</df-alert-details>
+</df-alert>
+```
+
+When migrating:
+
+- move main text into `df-alert-title`;
+- move collapsed details into `df-alert-details`;
+- remove custom collapse toggle markup when the new alert provides it;
+- remove unused `NgbCollapse` imports and state helpers only after confirming they are not used elsewhere;
+- preserve dismissible behavior, alert type, handlers, and projected content.
+
+### `alert.programmatic-close`
+
+Legacy `close()` returned an Observable; new `close()` returns `Promise<void>`.
+
+Convert:
+
+```ts
+alert.close().subscribe(() => {
+  this.closed = true;
+});
+```
+
+to one of:
+
+```ts
+void alert.close().then(() => {
+  this.closed = true;
+});
+```
+
+or, inside an async function:
+
+```ts
+await alert.close();
+this.closed = true;
+```
+
+Do not make surrounding functions `async` if that changes a public API or call contract without checking usages.
+
+### `alert.legacy-module-import`
+
+A legacy alert module import remains after the deterministic migration.
+
+This TODO is emitted for legacy alert-specific modules such as `DfAlertModule` or `NgbAlertModule`. Check whether the
+module is still needed for other legacy components before removing it.
+
+Broad `NgbModule` imports are not flagged by this TODO. Treat them as separate manual cleanup and remove them only when
+the module no longer needs them for remaining ng-bootstrap APIs.
+
+### `alert.indirect-component-imports`
+
+The component needs `DfAlert`, but its Angular `imports` metadata is not a simple array literal.
+
+Inspect the referenced value or expression. Add `DfAlert` to the actual imports list only when the shape is clear. If the
+imports value is computed, shared, or otherwise ambiguous, preserve the TODO for human review.
+
+## Configuration Migration
+
+Legacy `NgbAlertConfig` is not supported anymore and is marked with `TODO(df-migration alert.config)` for human review.
+
+Do not migrate it automatically. Review the legacy defaults and decide whether they should become local alert inputs,
+new `provideDfAlertConfig()` usage, or application-specific cleanup.
+
+## Validation
+
+After AI-assisted alert migration:
+
+1. Confirm no unexpected `ngb-alert`, `NgbAlert`, or `NgbAlertModule` usages remain.
+2. Run the narrowest useful typecheck/build command for touched projects when the command is clear.
+3. Run visual or e2e checks for collapsible, page/banner, card, size, or dynamic type changes when available.
+4. Ask the user before running broad or expensive validation commands if the right command is unclear.

package/schematics/component-migration/alert/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (options: import("../shared/types").ComponentMigrationSchema) => import("@angular-devkit/schematics").Rule;
+export default _default;

package/schematics/component-migration/alert/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const create_component_schematic_1 = require("../shared/create-component-schematic");
+const migration_1 = require("./migration");
+exports.default = (0, create_component_schematic_1.createComponentMigrationSchematic)(migration_1.alertMigration);

package/schematics/component-migration/alert/migration.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMigrationDefinition } from '../shared/types';
+export declare const alertMigration: ComponentMigrationDefinition;

package/schematics/component-migration/alert/migration.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.alertMigration = void 0;
+const template_result_1 = require("../shared/template-result");
+const template_edits_1 = require("../shared/template-edits");
+const alert_imports_1 = require("./steps/alert-imports");
+const animation_input_1 = require("./steps/animation-input");
+const close_output_1 = require("./steps/close-output");
+const icon_directive_1 = require("./steps/icon-directive");
+const icon_directive_imports_1 = require("./steps/icon-directive-imports");
+const legacy_module_imports_1 = require("./steps/legacy-module-imports");
+const legacy_config_todos_1 = require("../shared/legacy-config-todos");
+const programmatic_close_1 = require("./steps/programmatic-close");
+const selector_1 = require("./steps/selector");
+const static_classes_1 = require("./steps/static-classes");
+const static_type_1 = require("./steps/static-type");
+const template_todos_1 = require("./steps/template-todos");
+const template_reference_1 = require("./steps/template-reference");
+function getAlertElements(template) {
+    return (0, template_edits_1.findTemplateElements)(template, (element) => element.name === 'ngb-alert');
+}
+function migrateAlertTemplate(template) {
+    const edits = [];
+    for (const element of getAlertElements(template)) {
+        (0, template_todos_1.editAlertTemplateTodos)(element, edits);
+        (0, icon_directive_1.editIconDirective)(element, edits);
+        (0, animation_input_1.editAnimationInput)(element, edits);
+        (0, close_output_1.editCloseOutput)(element, edits);
+        (0, static_classes_1.editStaticClasses)(element, edits);
+        (0, static_type_1.editStaticType)(element, edits);
+        (0, template_reference_1.editTemplateReference)(element, edits);
+        (0, selector_1.editSelector)(element, edits);
+    }
+    return (0, template_result_1.createTemplateMigrationResult)(template, edits);
+}
+function migrateAlertSourceFile(context) {
+    return [
+        ...(0, icon_directive_imports_1.editIconDirectiveImports)(context),
+        ...(0, alert_imports_1.editAlertImports)(context),
+        ...(0, legacy_module_imports_1.editLegacyModuleImportTodos)(context),
+        ...(0, programmatic_close_1.editProgrammaticCloseTodos)(context)
+    ];
+}
+exports.alertMigration = {
+    id: 'alert',
+    countLegacyTemplateUsages: (template) => getAlertElements(template).length,
+    migrateTemplate: migrateAlertTemplate,
+    migrateSourceFile: migrateAlertSourceFile,
+    migrateProjectSourceFile: (context) => (0, legacy_config_todos_1.editLegacyConfigTodos)(context, ['NgbAlertConfig'])
+};

package/schematics/component-migration/alert/schema.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "SchematicsMigrateAlert",
+  "title": "Migrate Alert Schema",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "Name of the Angular project to scan or migrate",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "all": {
+      "type": "boolean",
+      "description": "Scan or migrate every buildable Angular project",
+      "default": false
+    },
+    "scan": {
+      "type": "boolean",
+      "description": "Only scan alert usages without applying the migration",
+      "default": false
+    }
+  }
+}

package/schematics/component-migration/alert/steps/alert-imports.d.ts

@@ -0,0 +1,4 @@
+import { TemplateEdit } from '../../shared/template-edits';
+import { ComponentMigrationSourceContext } from '../../shared/types';
+export declare function sourceFileNeedsDfAlert(context: ComponentMigrationSourceContext): boolean;
+export declare function editAlertImports(context: ComponentMigrationSourceContext): TemplateEdit[];

package/schematics/component-migration/alert/steps/alert-imports.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sourceFileNeedsDfAlert = sourceFileNeedsDfAlert;
+exports.editAlertImports = editAlertImports;
+const tslib_1 = require("tslib");
+const ts = tslib_1.__importStar(require("typescript"));
+const import_edits_1 = require("../../shared/import-edits");
+const angular_component_1 = require("../../shared/angular-component");
+const component_context_1 = require("../../shared/component-context");
+const component_imports_1 = require("../../shared/component-imports");
+const LEGACY_ALERT_IMPORTS = new Set(['@ng-bootstrap/ng-bootstrap/alert', '@ng-bootstrap/ng-bootstrap']);
+const NEW_ALERT_IMPORT = '@design-factory/angular/alert';
+const NGB_ALERT = 'NgbAlert';
+const NGB_ALERT_MODULE = 'NgbAlertModule';
+const DF_ALERT = 'DfAlert';
+function componentUsesDfAlert(templates) {
+    return templates.some((template) => template.includes('<df-alert') || template.includes('</df-alert>'));
+}
+function sourceFileNeedsDfAlert(context) {
+    return (0, component_context_1.sourceFileNeedsComponentTemplate)(context, componentUsesDfAlert);
+}
+function getLegacyAlertImports(sourceFile) {
+    return (0, component_imports_1.getComponentNamedImports)(sourceFile, LEGACY_ALERT_IMPORTS, [NGB_ALERT, NGB_ALERT_MODULE]);
+}
+function getNewImportName(legacyImport) {
+    return legacyImport.importedName === NGB_ALERT && legacyImport.localName !== NGB_ALERT
+        ? `${DF_ALERT} as ${legacyImport.localName}`
+        : DF_ALERT;
+}
+function getScopeName(legacyImport) {
+    return legacyImport.importedName === NGB_ALERT && legacyImport.localName !== NGB_ALERT
+        ? legacyImport.localName
+        : DF_ALERT;
+}
+function getSkippedRanges(sourceFile) {
+    const importDeclarationRanges = sourceFile.statements.flatMap((statement) => ts.isImportDeclaration(statement) ? [{ start: statement.getFullStart(), end: statement.getEnd() }] : []);
+    const decoratorImportsArrayRanges = (0, angular_component_1.findDecoratorImportsArrays)(sourceFile).map((importsArray) => ({
+        start: importsArray.getStart(sourceFile),
+        end: importsArray.getEnd()
+    }));
+    return [...importDeclarationRanges, ...decoratorImportsArrayRanges];
+}
+function editNgbAlertReferences(sourceFile, legacyImports, newImports) {
+    const edits = [];
+    const skippedRanges = getSkippedRanges(sourceFile);
+    const alertImports = legacyImports.filter((legacyImport) => legacyImport.importedName === NGB_ALERT);
+    const scanner = ts.createScanner(ts.ScriptTarget.Latest, false, ts.LanguageVariant.Standard, sourceFile.text);
+    let token = scanner.scan();
+    while (token !== ts.SyntaxKind.EndOfFileToken) {
+        const start = scanner.getTokenStart();
+        const end = scanner.getTokenEnd();
+        const legacyImport = alertImports.find((candidate) => candidate.localName === scanner.getTokenText());
+        if (token === ts.SyntaxKind.Identifier &&
+            legacyImport &&
+            !skippedRanges.some((range) => start >= range.start && end <= range.end)) {
+            const replacement = getScopeName(legacyImport);
+            newImports.add(getNewImportName(legacyImport));
+            if (scanner.getTokenText() !== replacement) {
+                edits.push({ start, end, text: replacement });
+            }
+        }
+        token = scanner.scan();
+    }
+    return edits;
+}
+function editAlertImports(context) {
+    if (!sourceFileNeedsDfAlert(context)) {
+        return [];
+    }
+    const newImports = new Set();
+    const legacyImports = getLegacyAlertImports(context.sourceFile);
+    const scopeEdits = (0, component_imports_1.editComponentScopeImports)({
+        context,
+        newImport: { moduleName: NEW_ALERT_IMPORT, symbolName: DF_ALERT },
+        componentNeedsNewImport: componentUsesDfAlert,
+        legacyImports,
+        legacyScopeImportedNames: [NGB_ALERT, NGB_ALERT_MODULE],
+        getReplacement: (legacyImport) => ({
+            scopeName: getScopeName(legacyImport),
+            importName: getNewImportName(legacyImport)
+        }),
+        indirectComponentImportsTodo: {
+            code: 'alert.indirect-component-imports',
+            message: 'Component imports use an indirect value. Add DfAlert to that imports value after verifying its shape.'
+        },
+        addTopLevelImport: false
+    });
+    for (const newImport of scopeEdits.newImports) {
+        newImports.add(newImport);
+    }
+    const edits = [
+        ...scopeEdits.edits,
+        ...editNgbAlertReferences(context.sourceFile, legacyImports, newImports),
+        ...(0, import_edits_1.removeNamedImports)(context.sourceFile, LEGACY_ALERT_IMPORTS, [NGB_ALERT, NGB_ALERT_MODULE])
+    ];
+    return [...edits, ...(0, import_edits_1.addNamedImports)(context.sourceFile, NEW_ALERT_IMPORT, [...newImports])];
+}

package/schematics/component-migration/alert/steps/animation-input.d.ts

@@ -0,0 +1,3 @@
+import { TmplAstElement } from '@angular/compiler';
+import { TemplateEdit } from '../../shared/template-edits';
+export declare function editAnimationInput(element: TmplAstElement, edits: TemplateEdit[]): void;

package/schematics/component-migration/alert/steps/animation-input.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.editAnimationInput = editAnimationInput;
+const template_edits_1 = require("../../shared/template-edits");
+function editAnimationInput(element, edits) {
+    if ((0, template_edits_1.findTextAttribute)(element, 'animated') || (0, template_edits_1.findBoundAttribute)(element, 'animated')) {
+        return;
+    }
+    const animationAttribute = (0, template_edits_1.findTextAttribute)(element, 'animation') ?? (0, template_edits_1.findBoundAttribute)(element, 'animation');
+    if (animationAttribute?.keySpan) {
+        edits.push({
+            start: animationAttribute.keySpan.start.offset,
+            end: animationAttribute.keySpan.end.offset,
+            text: 'animated'
+        });
+    }
+}

package/schematics/component-migration/alert/steps/close-output.d.ts

@@ -0,0 +1,3 @@
+import { TmplAstElement } from '@angular/compiler';
+import { TemplateEdit } from '../../shared/template-edits';
+export declare function editCloseOutput(element: TmplAstElement, edits: TemplateEdit[]): void;

package/schematics/component-migration/alert/steps/close-output.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.editCloseOutput = editCloseOutput;
+const template_edits_1 = require("../../shared/template-edits");
+function editCloseOutput(element, edits) {
+    if ((0, template_edits_1.findBoundEvent)(element, 'closed')) {
+        return;
+    }
+    const closeOutput = (0, template_edits_1.findBoundEvent)(element, 'close');
+    if (closeOutput?.keySpan) {
+        edits.push({
+            start: closeOutput.keySpan.start.offset,
+            end: closeOutput.keySpan.end.offset,
+            text: 'closed'
+        });
+    }
+}

package/schematics/component-migration/alert/steps/icon-directive-imports.d.ts

@@ -0,0 +1,3 @@
+import { TemplateEdit } from '../../shared/template-edits';
+import { ComponentMigrationSourceContext } from '../../shared/types';
+export declare function editIconDirectiveImports(context: ComponentMigrationSourceContext): TemplateEdit[];

package/schematics/component-migration/alert/steps/icon-directive-imports.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.editIconDirectiveImports = editIconDirectiveImports;
+const tslib_1 = require("tslib");
+const ts = tslib_1.__importStar(require("typescript"));
+const angular_component_1 = require("../../shared/angular-component");
+const import_edits_1 = require("../../shared/import-edits");
+const legacyDesignFactoryImport = '@design-factory/design-factory';
+const iconDirectiveName = 'DfInsertIconDirective';
+function componentStillNeedsIconDirective(templates) {
+    return templates.some((template) => template.includes('dfInsertAlertIcon') || template.includes('dfInsertToastIcon'));
+}
+function editComponentImports(context) {
+    const edits = [];
+    const removedRanges = [];
+    for (const [component, templates] of context.templatesByComponent) {
+        if (componentStillNeedsIconDirective(templates)) {
+            continue;
+        }
+        const importsArray = (0, angular_component_1.findComponentImportsArray)(component);
+        const importElement = importsArray?.elements.find((element) => ts.isIdentifier(element) && element.text === iconDirectiveName);
+        if (importsArray && importElement) {
+            const edit = (0, import_edits_1.editListElement)(importsArray, importElement, context.sourceFile);
+            edits.push(edit);
+            removedRanges.push({ ...edit, text: '' });
+        }
+    }
+    return { edits, removedRanges };
+}
+function isInsideRange(node, ranges) {
+    return ranges.some((range) => node.getStart() >= range.start && node.getEnd() <= range.end);
+}
+function hasRemainingIconDirectiveUsage(sourceFile, removedRanges) {
+    let found = false;
+    const visitNode = (node) => {
+        if (found) {
+            return;
+        }
+        if (ts.isIdentifier(node) && node.text === iconDirectiveName) {
+            if (!ts.isImportSpecifier(node.parent) && !isInsideRange(node, removedRanges)) {
+                found = true;
+                return;
+            }
+        }
+        ts.forEachChild(node, visitNode);
+    };
+    ts.forEachChild(sourceFile, visitNode);
+    return found;
+}
+function editImportDeclaration(sourceFile) {
+    for (const statement of sourceFile.statements) {
+        if (!ts.isImportDeclaration(statement) ||
+            !ts.isStringLiteral(statement.moduleSpecifier) ||
+            statement.moduleSpecifier.text !== legacyDesignFactoryImport) {
+            continue;
+        }
+        const namedBindings = statement.importClause?.namedBindings;
+        if (!namedBindings || !ts.isNamedImports(namedBindings)) {
+            continue;
+        }
+        const importSpecifier = namedBindings.elements.find((element) => element.name.text === iconDirectiveName);
+        if (!importSpecifier) {
+            continue;
+        }
+        if (namedBindings.elements.length === 1 && !statement.importClause?.name) {
+            return [
+                {
+                    start: statement.getFullStart(),
+                    end: statement.getEnd(),
+                    text: ''
+                }
+            ];
+        }
+        return [(0, import_edits_1.editListElement)(namedBindings, importSpecifier, sourceFile)];
+    }
+    return [];
+}
+function editIconDirectiveImports(context) {
+    const { edits, removedRanges } = editComponentImports(context);
+    if (edits.length > 0 && !hasRemainingIconDirectiveUsage(context.sourceFile, removedRanges)) {
+        edits.push(...editImportDeclaration(context.sourceFile));
+    }
+    return edits;
+}

package/schematics/component-migration/alert/steps/icon-directive.d.ts

@@ -0,0 +1,3 @@
+import { TmplAstElement } from '@angular/compiler';
+import { TemplateEdit } from '../../shared/template-edits';
+export declare function editIconDirective(element: TmplAstElement, edits: TemplateEdit[]): void;