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

package/schematics/component-migration/button/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.buttonMigration);

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

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

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

@@ -0,0 +1,180 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonMigration = void 0;
+const component_imports_1 = require("../shared/component-imports");
+const template_edits_1 = require("../shared/template-edits");
+const template_result_1 = require("../shared/template-result");
+const static_classes_1 = require("./steps/static-classes");
+const template_todos_1 = require("./steps/template-todos");
+const NEW_BUTTON_DIRECTIVES = new Set(['dfButton', 'dfIconButton']);
+const BUTTON_IMPORT_MODULE = '@design-factory/angular/button';
+const TRIGGER_CLICK_ATTRIBUTES = new Set(['dfTriggerClick']);
+const DROPDOWN_BUTTON_ATTRIBUTES = new Set(['ngbDropdownItem', 'ngbDropdownToggle', 'dropdownToggle']);
+const DROPDOWN_BUTTON_CLASSES = new Set([
+    'df-standalone-dropdown-toggle',
+    'dropdown-item',
+    'dropdown-toggle',
+    'dropdown-toggle-split'
+]);
+const IGNORED_BUTTON_CLASSES = new Set(['btn-check']);
+const IGNORED_BUTTON_ANCESTOR_CLASSES = new Set(['btn-group', 'btn-group-vertical', 'btn-toolbar']);
+const CARD_BUTTON_ATTRIBUTES = new Set(['dfManageCardSelectable']);
+const LINK_BUTTON_CLASSES = new Set(['btn-link']);
+const CARD_BUTTON_CLASSES = new Set(['card']);
+function isMigratableButtonHost(element) {
+    return element.name === 'button' || element.name === 'a';
+}
+function isButtonHost(element) {
+    const classes = (0, template_edits_1.getStaticOrInterpolatedClassTokens)(element);
+    return (isMigratableButtonHost(element) || classes.includes('btn') || hasAttributeOrInput(element, TRIGGER_CLICK_ATTRIBUTES));
+}
+function hasNewButtonDirective(element) {
+    return element.attributes.some((attribute) => NEW_BUTTON_DIRECTIVES.has(attribute.name));
+}
+function hasAttributeOrInput(element, names) {
+    return (element.attributes.some((attribute) => names.has(attribute.name)) ||
+        element.inputs.some((input) => names.has(input.name)));
+}
+function hasAnyStaticClass(element, classNames) {
+    const classes = (0, template_edits_1.getStaticClassTokens)(element);
+    return classes.some((className) => classNames.has(className));
+}
+function hasDropdownButtonPattern({ element }) {
+    return (hasAttributeOrInput(element, DROPDOWN_BUTTON_ATTRIBUTES) || hasAnyStaticClass(element, DROPDOWN_BUTTON_CLASSES));
+}
+function hasCardButtonPattern({ element }) {
+    return hasAttributeOrInput(element, CARD_BUTTON_ATTRIBUTES) || hasAnyStaticClass(element, CARD_BUTTON_CLASSES);
+}
+function hasLinkButtonPattern({ element }) {
+    return hasAnyStaticClass(element, LINK_BUTTON_CLASSES);
+}
+function hasNonNativeIconOnlyPattern({ element }) {
+    const classes = (0, template_edits_1.getStaticOrInterpolatedClassTokens)(element);
+    return element.name === 'span' && classes.includes('btn') && classes.includes('df-btn-icononly');
+}
+function hasRemainingProjectedIconOnlyPattern({ element }) {
+    const classes = (0, template_edits_1.getStaticOrInterpolatedClassTokens)(element);
+    return (isMigratableButtonHost(element) &&
+        (0, static_classes_1.hasIconOnlyButtonClasses)(classes) &&
+        (0, static_classes_1.hasProjectedIconOnlyContent)(element) &&
+        !(0, static_classes_1.hasSafeProjectedIconOnlyContent)(element));
+}
+function hasTriggerClickPattern({ element }) {
+    return hasAttributeOrInput(element, TRIGGER_CLICK_ATTRIBUTES);
+}
+function hasNonNativeButtonPattern({ element }) {
+    const classes = (0, template_edits_1.getStaticOrInterpolatedClassTokens)(element);
+    return !isMigratableButtonHost(element) && classes.includes('btn');
+}
+function hasIgnoredButtonClass(element) {
+    return hasAnyStaticClass(element, IGNORED_BUTTON_CLASSES);
+}
+function hasButtonGroupPattern({ ancestors }) {
+    return ancestors.some((ancestor) => (0, template_edits_1.getStaticClassTokens)(ancestor).some((className) => IGNORED_BUTTON_ANCESTOR_CLASSES.has(className)));
+}
+function hasSkippedLegacyButtonPattern({ element, ancestors }) {
+    return (hasDropdownButtonPattern({ element, ancestors }) ||
+        hasLinkButtonPattern({ element, ancestors }) ||
+        hasCardButtonPattern({ element, ancestors }) ||
+        hasNonNativeIconOnlyPattern({ element, ancestors }) ||
+        hasTriggerClickPattern({ element, ancestors }) ||
+        hasNonNativeButtonPattern({ element, ancestors }) ||
+        hasIgnoredButtonClass(element) ||
+        hasButtonGroupPattern({ element, ancestors }));
+}
+function isIgnoredButtonElement(buttonElement) {
+    return hasNewButtonDirective(buttonElement.element) || hasSkippedLegacyButtonPattern(buttonElement);
+}
+function getButtonElements(template) {
+    return (0, template_edits_1.findTemplateElementsWithAncestors)(template, isButtonHost);
+}
+function getButtonCandidates(template) {
+    return getButtonElements(template).flatMap((buttonElement) => {
+        const { element } = buttonElement;
+        const staticClassAttribute = (0, template_edits_1.findStaticOrInterpolatedClassAttribute)(element);
+        const classes = (0, template_edits_1.getStaticOrInterpolatedClassTokens)(element);
+        if (!staticClassAttribute ||
+            !classes.includes('btn') ||
+            !isMigratableButtonHost(element) ||
+            isIgnoredButtonElement(buttonElement)) {
+            return [];
+        }
+        return [{ element, classes, staticClassAttribute }];
+    });
+}
+function getLegacyButtonUsageElements(template) {
+    return getButtonElements(template).filter((buttonElement) => {
+        const element = buttonElement.element;
+        return !hasNewButtonDirective(element) && (0, template_edits_1.getStaticOrInterpolatedClassTokens)(element).includes('btn');
+    });
+}
+function migrateButtonTemplate(template) {
+    const edits = [];
+    const standaloneImports = [];
+    for (const buttonElement of getButtonElements(template)) {
+        const hasStaticButtonClass = (0, template_edits_1.getStaticOrInterpolatedClassTokens)(buttonElement.element).includes('btn');
+        const dropdownPattern = hasDropdownButtonPattern(buttonElement);
+        const linkPattern = hasLinkButtonPattern(buttonElement);
+        const cardPattern = hasCardButtonPattern(buttonElement);
+        const groupPattern = hasButtonGroupPattern(buttonElement);
+        const projectedIconOnlyContent = hasRemainingProjectedIconOnlyPattern(buttonElement);
+        const nonNativeIconOnlyPattern = hasNonNativeIconOnlyPattern(buttonElement);
+        const triggerClickPattern = hasTriggerClickPattern(buttonElement);
+        const nonNativeButtonPattern = hasNonNativeButtonPattern(buttonElement);
+        const unsupportedStaticClasses = hasStaticButtonClass &&
+            isMigratableButtonHost(buttonElement.element) &&
+            !dropdownPattern &&
+            !linkPattern &&
+            !cardPattern &&
+            !groupPattern &&
+            !nonNativeIconOnlyPattern &&
+            !triggerClickPattern &&
+            !nonNativeButtonPattern &&
+            !hasIgnoredButtonClass(buttonElement.element) &&
+            !(0, static_classes_1.hasSupportedStaticButtonClasses)((0, template_edits_1.getStaticOrInterpolatedClassTokens)(buttonElement.element));
+        const hasHardStopPattern = dropdownPattern ||
+            linkPattern ||
+            cardPattern ||
+            groupPattern ||
+            nonNativeIconOnlyPattern ||
+            triggerClickPattern ||
+            nonNativeButtonPattern ||
+            unsupportedStaticClasses;
+        (0, template_todos_1.editButtonTemplateTodos)(buttonElement.element, edits, {
+            hasStaticButtonClass,
+            hasHardStopPattern,
+            dropdownPattern: hasStaticButtonClass && dropdownPattern,
+            linkPattern: hasStaticButtonClass && linkPattern,
+            cardPattern: hasStaticButtonClass && cardPattern,
+            groupPattern: hasStaticButtonClass && groupPattern,
+            projectedIconOnlyContent: hasStaticButtonClass && projectedIconOnlyContent,
+            iconOnlyMissingAccessibleName: hasStaticButtonClass &&
+                isMigratableButtonHost(buttonElement.element) &&
+                (0, static_classes_1.hasIconOnlyButtonClasses)((0, template_edits_1.getStaticOrInterpolatedClassTokens)(buttonElement.element)) &&
+                !(0, static_classes_1.hasIconOnlyAccessibleName)(buttonElement.element),
+            nonNativeIconOnlyPattern: hasStaticButtonClass && nonNativeIconOnlyPattern,
+            triggerClickPattern: hasStaticButtonClass && triggerClickPattern,
+            nonNativeButtonPattern: hasStaticButtonClass && !nonNativeIconOnlyPattern && !triggerClickPattern && nonNativeButtonPattern
+        });
+    }
+    for (const candidate of getButtonCandidates(template)) {
+        const symbolName = (0, static_classes_1.editStaticClasses)(candidate, edits);
+        if (symbolName) {
+            (0, template_todos_1.editButtonReviewTodo)(candidate.element, edits);
+            standaloneImports.push({ moduleName: BUTTON_IMPORT_MODULE, symbolName });
+        }
+        else {
+            (0, template_todos_1.editUnsupportedStaticButtonClassesTodo)(candidate.element, edits);
+        }
+    }
+    return (0, template_result_1.createTemplateMigrationResult)(template, edits, standaloneImports);
+}
+exports.buttonMigration = {
+    id: 'button',
+    countLegacyTemplateUsages: (template) => getLegacyButtonUsageElements(template).length,
+    migrateTemplate: migrateButtonTemplate,
+    migrateSourceFile: (context) => (0, component_imports_1.editStandaloneComponentImports)(context, BUTTON_IMPORT_MODULE, {
+        code: 'button.indirect-component-imports',
+        message: 'Component imports use an indirect value. Add the required DF button imports after verifying its shape.'
+    })
+};

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

@@ -0,0 +1,25 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "SchematicsMigrateButton",
+  "title": "Migrate Button 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 button usages without applying the migration",
+      "default": false
+    }
+  }
+}

package/schematics/component-migration/button/steps/static-classes.d.ts

@@ -0,0 +1,10 @@
+import { TmplAstElement } from '@angular/compiler';
+import { TemplateEdit } from '../../shared/template-edits';
+import { hasIconOnlyButtonClasses } from '../../shared/button-visual-classes';
+import { ButtonCandidate } from '../types';
+export { hasIconOnlyButtonClasses };
+export declare function hasSupportedStaticButtonClasses(classes: string[]): boolean;
+export declare function hasProjectedIconOnlyContent(element: TmplAstElement): boolean;
+export declare function hasSafeProjectedIconOnlyContent(element: TmplAstElement): boolean;
+export declare function hasIconOnlyAccessibleName(element: TmplAstElement): boolean;
+export declare function editStaticClasses(candidate: ButtonCandidate, edits: TemplateEdit[]): string | null;

package/schematics/component-migration/button/steps/static-classes.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasIconOnlyButtonClasses = void 0;
+exports.hasSupportedStaticButtonClasses = hasSupportedStaticButtonClasses;
+exports.hasProjectedIconOnlyContent = hasProjectedIconOnlyContent;
+exports.hasSafeProjectedIconOnlyContent = hasSafeProjectedIconOnlyContent;
+exports.hasIconOnlyAccessibleName = hasIconOnlyAccessibleName;
+exports.editStaticClasses = editStaticClasses;
+const compiler_1 = require("@angular/compiler");
+const template_edits_1 = require("../../shared/template-edits");
+const button_visual_classes_1 = require("../../shared/button-visual-classes");
+Object.defineProperty(exports, "hasIconOnlyButtonClasses", { enumerable: true, get: function () { return button_visual_classes_1.hasIconOnlyButtonClasses; } });
+const PROJECTED_ICON_ELEMENT_NAMES = new Set(['span', 'i', 'df-icon']);
+function hasSupportedStaticButtonClasses(classes) {
+    return (0, button_visual_classes_1.getStaticButtonVisual)(classes) !== null;
+}
+function isWhitespaceTextNode(node) {
+    return node instanceof compiler_1.TmplAstText && node.value.trim() === '';
+}
+function hasStaticClasses(element) {
+    const classes = element.attributes
+        .find((attribute) => attribute.name === 'class')
+        ?.value.split(/\s+/)
+        .filter(Boolean);
+    return !!classes?.length;
+}
+function isSimpleProjectedIconElement(element) {
+    return (PROJECTED_ICON_ELEMENT_NAMES.has(element.name) &&
+        element.attributes.every((attribute) => attribute.name === 'class' || attribute.name === 'aria-hidden') &&
+        element.inputs.length === 0 &&
+        element.outputs.length === 0 &&
+        element.references.length === 0 &&
+        element.children.every(isWhitespaceTextNode) &&
+        hasStaticClasses(element));
+}
+function getProjectedIconElement(element) {
+    const contentChildren = element.children.filter((child) => !isWhitespaceTextNode(child));
+    if (contentChildren.length === 0) {
+        return null;
+    }
+    if (contentChildren.length === 1 &&
+        contentChildren[0] instanceof compiler_1.TmplAstElement &&
+        isSimpleProjectedIconElement(contentChildren[0])) {
+        return contentChildren[0];
+    }
+    return null;
+}
+function hasProjectedIconOnlyContent(element) {
+    return element.children.some((child) => !isWhitespaceTextNode(child));
+}
+function hasSafeProjectedIconOnlyContent(element) {
+    return getProjectedIconElement(element) !== null;
+}
+function hasIconOnlyAccessibleName(element) {
+    return (element.attributes.some((attribute) => (attribute.name === 'aria-label' ||
+        attribute.name === 'aria-labelledby' ||
+        attribute.name === 'prefixAriaLabelledby') &&
+        attribute.value.trim() !== '') ||
+        element.inputs.some((input) => input.name === 'aria-label' || input.name === 'aria-labelledby' || input.name === 'prefixAriaLabelledby'));
+}
+function getButtonDirective(candidate) {
+    const iconOnly = candidate.classes.includes('df-btn-icononly');
+    return iconOnly ? 'dfIconButton' : 'dfButton';
+}
+function getProjectedIconClasses(element) {
+    const iconElement = getProjectedIconElement(element);
+    return iconElement ? iconElement.attributes.find((attribute) => attribute.name === 'class').value.split(/\s+/) : [];
+}
+function editStaticClass(candidate, edits) {
+    const visual = (0, button_visual_classes_1.getStaticButtonVisual)(candidate.classes);
+    const removableClasses = (0, button_visual_classes_1.getRemovableButtonVisualClasses)(visual);
+    const remainingClasses = [...candidate.classes.filter((className) => !removableClasses.has(className))];
+    for (const className of getProjectedIconClasses(candidate.element)) {
+        if (className && !remainingClasses.includes(className)) {
+            remainingClasses.push(className);
+        }
+    }
+    if (remainingClasses.length === 0) {
+        edits.push((0, template_edits_1.removeTextAttribute)(candidate.staticClassAttribute));
+        return;
+    }
+    if (candidate.staticClassAttribute.valueSpan) {
+        edits.push({
+            start: candidate.staticClassAttribute.valueSpan.start.offset,
+            end: candidate.staticClassAttribute.valueSpan.end.offset,
+            text: remainingClasses.join(' ')
+        });
+    }
+}
+function editProjectedIconContent(candidate, edits) {
+    if (!(0, button_visual_classes_1.hasIconOnlyButtonClasses)(candidate.classes) || !hasSafeProjectedIconOnlyContent(candidate.element)) {
+        return;
+    }
+    edits.push({
+        start: candidate.element.startSourceSpan.end.offset,
+        end: candidate.element.endSourceSpan?.start.offset ?? candidate.element.startSourceSpan.end.offset,
+        text: ''
+    });
+}
+function editApi(candidate, buttonAttributes, edits) {
+    const insertOffset = (0, template_edits_1.getStartTagAttributesOffset)(candidate.element);
+    edits.push({
+        start: insertOffset,
+        end: insertOffset,
+        text: ` ${buttonAttributes}`
+    });
+}
+function editStaticButtonType(candidate, edits) {
+    if (candidate.element.name !== 'button') {
+        return;
+    }
+    const typeAttribute = (0, template_edits_1.findTextAttribute)(candidate.element, 'type');
+    if (typeAttribute?.value === 'button') {
+        edits.push((0, template_edits_1.removeTextAttribute)(typeAttribute));
+    }
+}
+function editStaticClasses(candidate, edits) {
+    const visual = (0, button_visual_classes_1.getStaticButtonVisual)(candidate.classes);
+    if (!visual) {
+        return null;
+    }
+    const directive = getButtonDirective(candidate);
+    editStaticClass(candidate, edits);
+    editProjectedIconContent(candidate, edits);
+    editStaticButtonType(candidate, edits);
+    editApi(candidate, (0, button_visual_classes_1.getButtonVisualAttributes)(visual, { directive }).join(' '), edits);
+    return button_visual_classes_1.BUTTON_VISUAL_DIRECTIVE_IMPORTS[directive];
+}

package/schematics/component-migration/button/steps/template-todos.d.ts

@@ -0,0 +1,19 @@
+import { TmplAstElement } from '@angular/compiler';
+import { TemplateEdit } from '../../shared/template-edits';
+interface ButtonTemplateTodoContext {
+    hasStaticButtonClass: boolean;
+    hasHardStopPattern?: boolean;
+    dropdownPattern?: boolean;
+    linkPattern?: boolean;
+    cardPattern?: boolean;
+    groupPattern?: boolean;
+    projectedIconOnlyContent?: boolean;
+    iconOnlyMissingAccessibleName?: boolean;
+    nonNativeIconOnlyPattern?: boolean;
+    triggerClickPattern?: boolean;
+    nonNativeButtonPattern?: boolean;
+}
+export declare function editButtonReviewTodo(element: TmplAstElement, edits: TemplateEdit[]): void;
+export declare function editUnsupportedStaticButtonClassesTodo(element: TmplAstElement, edits: TemplateEdit[]): void;
+export declare function editButtonTemplateTodos(element: TmplAstElement, edits: TemplateEdit[], context: ButtonTemplateTodoContext): void;
+export {};

package/schematics/component-migration/button/steps/template-todos.js

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.editButtonReviewTodo = editButtonReviewTodo;
+exports.editUnsupportedStaticButtonClassesTodo = editUnsupportedStaticButtonClassesTodo;
+exports.editButtonTemplateTodos = editButtonTemplateTodos;
+const button_visual_classes_1 = require("../../shared/button-visual-classes");
+const todo_comments_1 = require("../../shared/todo-comments");
+const template_edits_1 = require("../../shared/template-edits");
+const BUTTON_REVIEW_TODO = {
+    code: 'button.review',
+    message: 'This button was migrated automatically. Verify behavior and visual appearance.'
+};
+const BUTTON_UNSUPPORTED_STATIC_CLASSES_TODO = {
+    code: 'button.unsupported-static-classes',
+    marker: 'human',
+    message: 'Static legacy button classes were not migrated automatically. Convert this button manually.'
+};
+const BUTTON_DROPDOWN_PATTERN_TODO = {
+    code: 'button.dropdown-pattern',
+    marker: 'human',
+    message: 'This button is part of a dropdown and should be handled by the dropdown migration.'
+};
+const BUTTON_LINK_PATTERN_TODO = {
+    code: 'button.link-pattern',
+    marker: 'human',
+    message: 'This button uses legacy btn-link styling. It probably maps to appearance="text", but btn-link is no longer supported by DF.'
+};
+const BUTTON_CARD_PATTERN_TODO = {
+    code: 'button.card-pattern',
+    marker: 'human',
+    message: 'This button is used as a selectable card and was skipped by the deterministic migration.'
+};
+const BUTTON_GROUP_PATTERN_TODO = {
+    code: 'button.group-pattern',
+    marker: 'human',
+    message: 'This button is inside a legacy button group and was skipped by the deterministic migration.'
+};
+const BUTTON_PROJECTED_ICON_ONLY_CONTENT_TODO = {
+    code: 'button.projected-icon-only-content',
+    message: 'This icon-only button projects content, but dfIconButton ignores projected content. Move icon classes to the host or rebuild the icon logic when the structure is clear.'
+};
+const BUTTON_ICON_ONLY_ACCESSIBLE_NAME_TODO = {
+    code: 'button.icon-only-accessible-name',
+    marker: 'human',
+    message: 'This icon-only button needs an accessible name. Add aria-label or aria-labelledby after verifying intent.'
+};
+const BUTTON_NON_NATIVE_ICON_ONLY_PATTERN_TODO = {
+    code: 'button.non-native-icon-only-pattern',
+    marker: 'human',
+    message: 'This icon-only legacy button uses a non-native host and was not migrated automatically. Verify whether it should become an interactive button.'
+};
+const BUTTON_TRIGGER_CLICK_PATTERN_TODO = {
+    code: 'button.trigger-click-pattern',
+    marker: 'human',
+    message: 'This legacy button-like trigger uses dfTriggerClick and was skipped by the deterministic migration.'
+};
+const BUTTON_NON_NATIVE_BUTTON_PATTERN_TODO = {
+    code: 'button.non-native-button-pattern',
+    marker: 'human',
+    message: 'This legacy button uses a non-native host and was skipped by the deterministic migration.'
+};
+function editButtonReviewTodo(element, edits) {
+    (0, todo_comments_1.editTemplateTodos)(element, [BUTTON_REVIEW_TODO], edits);
+}
+function editUnsupportedStaticButtonClassesTodo(element, edits) {
+    (0, todo_comments_1.editTemplateTodos)(element, [BUTTON_UNSUPPORTED_STATIC_CLASSES_TODO], edits);
+}
+function hasDynamicLegacyButtonClassBinding(element) {
+    return element.inputs.some((input) => button_visual_classes_1.BUTTON_DYNAMIC_VISUAL_CLASSES.has(input.name));
+}
+function hasGenericDynamicClassBinding(element) {
+    return (!!(0, template_edits_1.findTextAttribute)(element, 'ngClass') ||
+        element.inputs.some((input) => input.name === 'ngClass' || input.name === 'class'));
+}
+function editButtonTemplateTodos(element, edits, context) {
+    const todos = [];
+    const hasDynamicLegacyClass = hasDynamicLegacyButtonClassBinding(element);
+    const hasDynamicClassTodo = !context.hasHardStopPattern &&
+        (hasDynamicLegacyClass || (context.hasStaticButtonClass && hasGenericDynamicClassBinding(element)));
+    if (context.dropdownPattern) {
+        todos.push(BUTTON_DROPDOWN_PATTERN_TODO);
+    }
+    if (context.linkPattern) {
+        todos.push(BUTTON_LINK_PATTERN_TODO);
+    }
+    if (context.cardPattern) {
+        todos.push(BUTTON_CARD_PATTERN_TODO);
+    }
+    if (context.groupPattern) {
+        todos.push(BUTTON_GROUP_PATTERN_TODO);
+    }
+    if (context.projectedIconOnlyContent) {
+        todos.push(BUTTON_PROJECTED_ICON_ONLY_CONTENT_TODO);
+    }
+    if (context.iconOnlyMissingAccessibleName) {
+        todos.push(BUTTON_ICON_ONLY_ACCESSIBLE_NAME_TODO);
+    }
+    if (context.nonNativeIconOnlyPattern) {
+        todos.push(BUTTON_NON_NATIVE_ICON_ONLY_PATTERN_TODO);
+    }
+    if (context.triggerClickPattern) {
+        todos.push(BUTTON_TRIGGER_CLICK_PATTERN_TODO);
+    }
+    if (context.nonNativeButtonPattern) {
+        todos.push(BUTTON_NON_NATIVE_BUTTON_PATTERN_TODO);
+    }
+    if (hasDynamicClassTodo) {
+        todos.push({
+            code: 'button.dynamic-class',
+            message: 'Dynamic button classes were not migrated. Check whether they still target legacy button classes.'
+        });
+    }
+    if (!context.hasHardStopPattern && hasDynamicLegacyClass) {
+        todos.push({
+            code: 'button.dynamic-legacy-class',
+            message: 'Dynamic legacy button class binding was not migrated. Convert it to button input logic.'
+        });
+    }
+    (0, todo_comments_1.editTemplateTodos)(element, todos, edits);
+}

package/schematics/component-migration/button/types.d.ts

@@ -0,0 +1,7 @@
+import { TmplAstElement } from '@angular/compiler';
+import { ClassAttribute } from '../shared/template-edits';
+export interface ButtonCandidate {
+    element: TmplAstElement;
+    classes: string[];
+    staticClassAttribute: ClassAttribute;
+}

package/schematics/component-migration/button/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });