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

package/schematics/component-migration/dropdown/steps/template-attributes.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.editDropdownWrapper = editDropdownWrapper;
+exports.countDropdownWrapperUsage = countDropdownWrapperUsage;
+const template_items_1 = require("./template-items");
+const template_menu_1 = require("./template-menu");
+const template_toggle_1 = require("./template-toggle");
+const template_todos_1 = require("./template-todos");
+const template_helpers_1 = require("./template-helpers");
+const template_wrapper_1 = require("./template-wrapper");
+function editDropdownWrapper(wrapper, context, edits) {
+    const descendants = (0, template_helpers_1.getDescendantElements)(wrapper);
+    const toggles = descendants.filter(template_helpers_1.hasNgbDropdownToggle);
+    const menus = descendants.filter(template_helpers_1.hasNgbDropdownMenu);
+    const [menu] = menus;
+    const hasAnchor = descendants.some(template_helpers_1.hasNgbDropdownAnchor);
+    const split = toggles.some((toggle) => (0, template_toggle_1.hasSplitPattern)(toggle, wrapper));
+    const nestedDropdown = descendants.some(template_helpers_1.hasNgbDropdown);
+    const wrapperTodos = (0, template_wrapper_1.getUnsupportedWrapperTodos)(wrapper);
+    const hasDatepickerMenu = !!menu && (0, template_menu_1.hasDatepickerMenuContent)(menu);
+    const unsupportedMenu = !!menu && !(0, template_menu_1.hasEmptyMenuContent)(menu) && !(0, template_menu_1.hasRichMenuContent)(menu) && !(0, template_items_1.hasMigratableMenuContent)(menu);
+    const unsupportedStructure = toggles.length !== 1 ||
+        menus.length !== 1 ||
+        hasAnchor ||
+        split ||
+        nestedDropdown ||
+        hasDatepickerMenu ||
+        unsupportedMenu;
+    if (unsupportedStructure) {
+        (0, template_todos_1.editDropdownTemplateTodos)(wrapper, edits, {
+            ...wrapperTodos,
+            ...(menu ? (0, template_menu_1.getMenuTodoContext)(menu) : {}),
+            structure: unsupportedStructure,
+            anchor: hasAnchor,
+            split,
+            datepicker: hasDatepickerMenu
+        });
+        return { migrated: false, standaloneImports: [] };
+    }
+    const [toggle] = toggles;
+    const referenceName = (0, template_wrapper_1.getDropdownReferenceName)(wrapper, context);
+    const standaloneImports = [];
+    const toggleResult = (0, template_toggle_1.editToggle)(toggle, referenceName, edits);
+    const movedWrapperAttributes = (0, template_wrapper_1.getMovedWrapperAttributes)(wrapper, menu);
+    const menuResult = (0, template_menu_1.editMenu)(menu, referenceName, movedWrapperAttributes, edits);
+    standaloneImports.push(...toggleResult.imports, ...menuResult.imports);
+    (0, template_wrapper_1.editWrapper)(wrapper, edits);
+    (0, template_todos_1.editDropdownTemplateTodos)(wrapper, edits, {
+        ...wrapperTodos,
+        ...menuResult.todos,
+        migrated: true
+    });
+    return { migrated: true, standaloneImports };
+}
+function countDropdownWrapperUsage(element) {
+    return (0, template_helpers_1.hasNgbDropdown)(element);
+}

package/schematics/component-migration/dropdown/steps/template-helpers.d.ts

@@ -0,0 +1,20 @@
+import { TmplAstBoundAttribute, TmplAstBoundEvent, TmplAstElement, TmplAstReference, TmplAstTextAttribute } from '@angular/compiler';
+import { TemplateEdit } from '../../shared/template-edits';
+export type DropdownAttribute = TmplAstTextAttribute | TmplAstBoundAttribute;
+export type DropdownEditableNode = DropdownAttribute | TmplAstBoundEvent | TmplAstReference;
+export declare function getDescendantElements(element: TmplAstElement): TmplAstElement[];
+export declare function renameAttribute(attribute: DropdownEditableNode, name: string, edits: TemplateEdit[]): void;
+export declare function removeAttribute(attribute: DropdownEditableNode): TemplateEdit;
+export declare function getAttributeValue(attribute: DropdownAttribute | undefined): string;
+export declare function getEventValue(event: TmplAstBoundEvent | undefined): string;
+export declare function insertStartTagAttributes(element: TmplAstElement, attributes: string[], edits: TemplateEdit[]): void;
+export declare function editStartTagName(element: TmplAstElement, tagName: string, edits: TemplateEdit[]): void;
+export declare function editEndTagName(element: TmplAstElement, tagName: string, edits: TemplateEdit[]): void;
+export declare function editStaticClassTokens(element: TmplAstElement, removableClasses: Set<string>, edits: TemplateEdit[]): void;
+export declare function hasAttributeOrInput(element: TmplAstElement, name: string): boolean;
+export declare function getDropdownAttribute(element: TmplAstElement, name: string): DropdownAttribute | undefined;
+export declare function hasNgbDropdown(element: TmplAstElement): boolean;
+export declare function hasNgbDropdownToggle(element: TmplAstElement): boolean;
+export declare function hasNgbDropdownMenu(element: TmplAstElement): boolean;
+export declare function hasNgbDropdownItem(element: TmplAstElement): boolean;
+export declare function hasNgbDropdownAnchor(element: TmplAstElement): boolean;

package/schematics/component-migration/dropdown/steps/template-helpers.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDescendantElements = getDescendantElements;
+exports.renameAttribute = renameAttribute;
+exports.removeAttribute = removeAttribute;
+exports.getAttributeValue = getAttributeValue;
+exports.getEventValue = getEventValue;
+exports.insertStartTagAttributes = insertStartTagAttributes;
+exports.editStartTagName = editStartTagName;
+exports.editEndTagName = editEndTagName;
+exports.editStaticClassTokens = editStaticClassTokens;
+exports.hasAttributeOrInput = hasAttributeOrInput;
+exports.getDropdownAttribute = getDropdownAttribute;
+exports.hasNgbDropdown = hasNgbDropdown;
+exports.hasNgbDropdownToggle = hasNgbDropdownToggle;
+exports.hasNgbDropdownMenu = hasNgbDropdownMenu;
+exports.hasNgbDropdownItem = hasNgbDropdownItem;
+exports.hasNgbDropdownAnchor = hasNgbDropdownAnchor;
+const compiler_1 = require("@angular/compiler");
+const template_edits_1 = require("../../shared/template-edits");
+function getDescendantElements(element) {
+    const descendants = [];
+    (0, template_edits_1.visitTemplateNodes)(element.children, (node) => {
+        if (node instanceof compiler_1.TmplAstElement) {
+            descendants.push(node);
+        }
+    });
+    return descendants;
+}
+function getAttributeKeySpan(attribute) {
+    return attribute.keySpan ?? attribute.sourceSpan;
+}
+function renameAttribute(attribute, name, edits) {
+    const keySpan = getAttributeKeySpan(attribute);
+    edits.push({
+        start: keySpan.start.offset,
+        end: keySpan.end.offset,
+        text: name
+    });
+}
+function removeAttribute(attribute) {
+    const content = attribute.sourceSpan.start.file.content;
+    const start = attribute.sourceSpan.start.offset;
+    return {
+        start: /\s/.test(content[start - 1] ?? '') ? start - 1 : start,
+        end: attribute.sourceSpan.end.offset,
+        text: ''
+    };
+}
+function getAttributeValue(attribute) {
+    return (attribute?.valueSpan?.toString().trim() ?? (typeof attribute?.value === 'string' ? attribute.value.trim() : ''));
+}
+function getEventValue(event) {
+    return (event?.handler?.source ?? '').trim();
+}
+function insertStartTagAttributes(element, attributes, edits) {
+    if (attributes.length === 0) {
+        return;
+    }
+    const offset = (0, template_edits_1.getStartTagInsertOffset)(element);
+    edits.push({
+        start: offset,
+        end: offset,
+        text: ` ${attributes.join(' ')}`
+    });
+}
+function editStartTagName(element, tagName, edits) {
+    const start = element.startSourceSpan.start.offset + 1;
+    edits.push({
+        start,
+        end: start + element.name.length,
+        text: tagName
+    });
+}
+function editEndTagName(element, tagName, edits) {
+    if (!element.endSourceSpan) {
+        return;
+    }
+    const start = element.endSourceSpan.start.offset + 2;
+    edits.push({
+        start,
+        end: start + element.name.length,
+        text: tagName
+    });
+}
+function editStaticClassTokens(element, removableClasses, edits) {
+    const classAttribute = (0, template_edits_1.findTextAttribute)(element, 'class');
+    if (!classAttribute) {
+        return;
+    }
+    const remainingClasses = classAttribute.value
+        .split(/\s+/)
+        .filter((className) => className && !removableClasses.has(className));
+    if (remainingClasses.length === 0) {
+        edits.push((0, template_edits_1.removeTextAttribute)(classAttribute));
+    }
+    else if (classAttribute.valueSpan) {
+        edits.push({
+            start: classAttribute.valueSpan.start.offset,
+            end: classAttribute.valueSpan.end.offset,
+            text: remainingClasses.join(' ')
+        });
+    }
+}
+function hasAttributeOrInput(element, name) {
+    return !!(0, template_edits_1.findTextAttribute)(element, name) || !!(0, template_edits_1.findBoundAttribute)(element, name);
+}
+function getDropdownAttribute(element, name) {
+    return (0, template_edits_1.findTextAttribute)(element, name) ?? (0, template_edits_1.findBoundAttribute)(element, name);
+}
+function hasNgbDropdown(element) {
+    return hasAttributeOrInput(element, 'ngbDropdown');
+}
+function hasNgbDropdownToggle(element) {
+    return hasAttributeOrInput(element, 'ngbDropdownToggle') || hasAttributeOrInput(element, 'dropdownToggle');
+}
+function hasNgbDropdownMenu(element) {
+    return hasAttributeOrInput(element, 'ngbDropdownMenu');
+}
+function hasNgbDropdownItem(element) {
+    return hasAttributeOrInput(element, 'ngbDropdownItem');
+}
+function hasNgbDropdownAnchor(element) {
+    return hasAttributeOrInput(element, 'ngbDropdownAnchor');
+}

package/schematics/component-migration/dropdown/steps/template-imports.d.ts

@@ -0,0 +1,22 @@
+export declare const DROPDOWN_IMPORTS: {
+    dropdown: {
+        moduleName: string;
+        symbolName: string;
+    };
+    toggle: {
+        moduleName: string;
+        symbolName: string;
+    };
+    itemButton: {
+        moduleName: string;
+        symbolName: string;
+    };
+    itemLink: {
+        moduleName: string;
+        symbolName: string;
+    };
+    separator: {
+        moduleName: string;
+        symbolName: string;
+    };
+};

package/schematics/component-migration/dropdown/steps/template-imports.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DROPDOWN_IMPORTS = void 0;
+const DROPDOWN_IMPORT_MODULE = '@design-factory/angular/dropdown';
+const SEPARATOR_IMPORT_MODULE = '@design-factory/angular/separator';
+exports.DROPDOWN_IMPORTS = {
+    dropdown: { moduleName: DROPDOWN_IMPORT_MODULE, symbolName: 'DfDropdown' },
+    toggle: { moduleName: DROPDOWN_IMPORT_MODULE, symbolName: 'DfDropdownToggle' },
+    itemButton: { moduleName: DROPDOWN_IMPORT_MODULE, symbolName: 'DfDropdownItemButton' },
+    itemLink: { moduleName: DROPDOWN_IMPORT_MODULE, symbolName: 'DfDropdownItemLink' },
+    separator: { moduleName: SEPARATOR_IMPORT_MODULE, symbolName: 'DfSeparator' }
+};

package/schematics/component-migration/dropdown/steps/template-items.d.ts

@@ -0,0 +1,7 @@
+import { TmplAstElement } from '@angular/compiler';
+import { TemplateEdit } from '../../shared/template-edits';
+import { StandaloneImportRequirement } from '../../shared/types';
+export declare function isSimpleDivider(element: TmplAstElement): boolean;
+export declare function hasMigratableMenuContent(menu: TmplAstElement): boolean;
+export declare function editDropdownItem(element: TmplAstElement, edits: TemplateEdit[]): StandaloneImportRequirement[];
+export declare function editDivider(element: TmplAstElement, edits: TemplateEdit[]): StandaloneImportRequirement[];

package/schematics/component-migration/dropdown/steps/template-items.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSimpleDivider = isSimpleDivider;
+exports.hasMigratableMenuContent = hasMigratableMenuContent;
+exports.editDropdownItem = editDropdownItem;
+exports.editDivider = editDivider;
+const compiler_1 = require("@angular/compiler");
+const template_edits_1 = require("../../shared/template-edits");
+const template_imports_1 = require("./template-imports");
+const template_todos_1 = require("./template-todos");
+const template_helpers_1 = require("./template-helpers");
+function getClassBinding(element, name) {
+    return element.inputs.find((input) => input.type === compiler_1.BindingType.Class && input.name === name);
+}
+function isWhitespaceTextNode(node) {
+    return node instanceof compiler_1.TmplAstText && node.value.trim() === '';
+}
+function isSimpleDivider(element) {
+    return (element.name === 'hr' &&
+        (0, template_edits_1.getStaticClassTokens)(element).includes('dropdown-divider') &&
+        element.inputs.length === 0 &&
+        element.outputs.length === 0 &&
+        element.references.length === 0 &&
+        element.attributes.every((attribute) => attribute.name === 'class') &&
+        element.children.every(isWhitespaceTextNode));
+}
+function hasMigratableMenuContent(menu) {
+    return (0, template_helpers_1.getDescendantElements)(menu).some((element) => (0, template_helpers_1.hasNgbDropdownItem)(element) || isSimpleDivider(element));
+}
+function editDropdownItem(element, edits) {
+    const item = (0, template_helpers_1.getDropdownAttribute)(element, 'ngbDropdownItem');
+    if (!item) {
+        return [];
+    }
+    if (element.name !== 'button' && element.name !== 'a') {
+        (0, template_todos_1.editDropdownTemplateTodos)(element, edits, { unsupportedItemHost: true });
+        return [];
+    }
+    (0, template_helpers_1.renameAttribute)(item, 'dfDropdownItem', edits);
+    const removableClasses = new Set(['dropdown-item']);
+    if ((0, template_edits_1.getStaticClassTokens)(element).includes('active') && !(0, template_helpers_1.hasAttributeOrInput)(element, 'active')) {
+        removableClasses.add('active');
+        (0, template_helpers_1.insertStartTagAttributes)(element, ['active'], edits);
+    }
+    (0, template_helpers_1.editStaticClassTokens)(element, removableClasses, edits);
+    const activeBinding = getClassBinding(element, 'active');
+    if (activeBinding) {
+        (0, template_helpers_1.renameAttribute)(activeBinding, 'active', edits);
+    }
+    return [element.name === 'button' ? template_imports_1.DROPDOWN_IMPORTS.itemButton : template_imports_1.DROPDOWN_IMPORTS.itemLink];
+}
+function editDivider(element, edits) {
+    if (!isSimpleDivider(element)) {
+        return [];
+    }
+    edits.push((0, template_edits_1.replaceElement)(element, '<df-separator />'));
+    return [template_imports_1.DROPDOWN_IMPORTS.separator];
+}

package/schematics/component-migration/dropdown/steps/template-menu.d.ts

@@ -0,0 +1,14 @@
+import { TmplAstElement } from '@angular/compiler';
+import { TemplateEdit } from '../../shared/template-edits';
+import { StandaloneImportRequirement } from '../../shared/types';
+import { DropdownTemplateTodoContext } from './template-todos';
+export declare function getMenuSize(menu: TmplAstElement): 'sm' | 'lg' | null;
+export declare function getMenuClassPlacement(menu: TmplAstElement): string | null;
+export declare function hasRichMenuContent(menu: TmplAstElement): boolean;
+export declare function hasEmptyMenuContent(menu: TmplAstElement): boolean;
+export declare function hasDatepickerMenuContent(menu: TmplAstElement): boolean;
+export declare function getMenuTodoContext(menu: TmplAstElement): DropdownTemplateTodoContext;
+export declare function editMenu(menu: TmplAstElement, referenceName: string, movedWrapperAttributes: string[], edits: TemplateEdit[]): {
+    todos: DropdownTemplateTodoContext;
+    imports: StandaloneImportRequirement[];
+};

package/schematics/component-migration/dropdown/steps/template-menu.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMenuSize = getMenuSize;
+exports.getMenuClassPlacement = getMenuClassPlacement;
+exports.hasRichMenuContent = hasRichMenuContent;
+exports.hasEmptyMenuContent = hasEmptyMenuContent;
+exports.hasDatepickerMenuContent = hasDatepickerMenuContent;
+exports.getMenuTodoContext = getMenuTodoContext;
+exports.editMenu = editMenu;
+const compiler_1 = require("@angular/compiler");
+const template_edits_1 = require("../../shared/template-edits");
+const template_imports_1 = require("./template-imports");
+const template_items_1 = require("./template-items");
+const template_helpers_1 = require("./template-helpers");
+const MENU_STANDARD_CLASSES = new Set([
+    'dropdown-menu',
+    'dropdown-menu-right',
+    'dropdown-menu-end',
+    'dropdown-menu-left',
+    'dropdown-menu-start',
+    'df-dropdown-menu-sm',
+    'df-dropdown-menu-lg',
+    'dropdown-menu-sm',
+    'dropdown-menu-lg'
+]);
+function getMenuSize(menu) {
+    const classes = (0, template_edits_1.getStaticClassTokens)(menu);
+    const hasSmall = classes.includes('df-dropdown-menu-sm') || classes.includes('dropdown-menu-sm');
+    const hasLarge = classes.includes('df-dropdown-menu-lg') || classes.includes('dropdown-menu-lg');
+    if (hasSmall === hasLarge) {
+        return null;
+    }
+    return hasSmall ? 'sm' : 'lg';
+}
+function getMenuClassPlacement(menu) {
+    const classes = (0, template_edits_1.getStaticClassTokens)(menu);
+    if (classes.includes('dropdown-menu-right') || classes.includes('dropdown-menu-end')) {
+        return 'bottom-end bottom-start top-end top-start';
+    }
+    return null;
+}
+function isRichMenuElement(element) {
+    return (!(0, template_helpers_1.hasNgbDropdownItem)(element) &&
+        !(0, template_items_1.isSimpleDivider)(element) &&
+        element.name !== 'ng-container' &&
+        element.name !== 'ng-template');
+}
+function hasRichMenuElement(children) {
+    return children.some((child) => {
+        if (!(child instanceof compiler_1.TmplAstElement)) {
+            return false;
+        }
+        if (child.name === 'ng-container' || child.name === 'ng-template') {
+            return hasRichMenuElement(child.children);
+        }
+        return isRichMenuElement(child);
+    });
+}
+function hasRichMenuContent(menu) {
+    return hasRichMenuElement(menu.children);
+}
+function isEmptyMenuNode(node) {
+    if (node instanceof compiler_1.TmplAstText) {
+        return node.value.trim() === '';
+    }
+    if (node instanceof compiler_1.TmplAstElement) {
+        return node.children.every(isEmptyMenuNode);
+    }
+    return false;
+}
+function hasEmptyMenuContent(menu) {
+    return menu.children.every(isEmptyMenuNode);
+}
+function hasDatepickerMenuContent(menu) {
+    return (0, template_helpers_1.getDescendantElements)(menu).some((element) => element.name === 'ngb-datepicker' ||
+        (0, template_helpers_1.hasAttributeOrInput)(element, 'ngbDatepicker') ||
+        element.references.some((reference) => reference.value === 'ngbDatepicker'));
+}
+function getMenuTodoContext(menu) {
+    const remainingClasses = (0, template_edits_1.getStaticClassTokens)(menu).filter((className) => !MENU_STANDARD_CLASSES.has(className));
+    return {
+        customMenuClasses: remainingClasses.length > 0,
+        richMenu: hasRichMenuContent(menu)
+    };
+}
+function editMenu(menu, referenceName, movedWrapperAttributes, edits) {
+    const todos = {};
+    const imports = [template_imports_1.DROPDOWN_IMPORTS.dropdown];
+    const menuAttribute = (0, template_helpers_1.getDropdownAttribute)(menu, 'ngbDropdownMenu');
+    const ariaLabelledby = (0, template_edits_1.findTextAttribute)(menu, 'aria-labelledby') ?? (0, template_edits_1.findBoundAttribute)(menu, 'aria-labelledby');
+    (0, template_helpers_1.editStartTagName)(menu, 'df-dropdown', edits);
+    (0, template_helpers_1.editEndTagName)(menu, 'df-dropdown', edits);
+    if (menuAttribute) {
+        edits.push((0, template_helpers_1.removeAttribute)(menuAttribute));
+    }
+    if (ariaLabelledby) {
+        edits.push((0, template_helpers_1.removeAttribute)(ariaLabelledby));
+    }
+    (0, template_helpers_1.editStaticClassTokens)(menu, MENU_STANDARD_CLASSES, edits);
+    (0, template_helpers_1.insertStartTagAttributes)(menu, [`#${referenceName}`, ...movedWrapperAttributes], edits);
+    Object.assign(todos, getMenuTodoContext(menu));
+    for (const child of (0, template_helpers_1.getDescendantElements)(menu)) {
+        imports.push(...(0, template_items_1.editDropdownItem)(child, edits));
+        imports.push(...(0, template_items_1.editDivider)(child, edits));
+    }
+    return { todos, imports };
+}

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

@@ -0,0 +1,19 @@
+import { TmplAstElement } from '@angular/compiler';
+import { TemplateEdit } from '../../shared/template-edits';
+export interface DropdownTemplateTodoContext {
+    migrated?: boolean;
+    structure?: boolean;
+    dynamicToggleClass?: boolean;
+    autoClose?: boolean;
+    anchor?: boolean;
+    split?: boolean;
+    datepicker?: boolean;
+    richMenu?: boolean;
+    customPositioning?: boolean;
+    customMenuClasses?: boolean;
+    unsupportedItemHost?: boolean;
+    iconOnlyMissingAccessibleName?: boolean;
+    btnLinkToggle?: boolean;
+    programmaticApi?: boolean;
+}
+export declare function editDropdownTemplateTodos(element: TmplAstElement, edits: TemplateEdit[], context: DropdownTemplateTodoContext): void;

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

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.editDropdownTemplateTodos = editDropdownTemplateTodos;
+const todo_comments_1 = require("../../shared/todo-comments");
+const DROPDOWN_REVIEW_TODO = {
+    code: 'dropdown.review',
+    message: 'This dropdown was migrated automatically. Verify behavior and visual appearance.'
+};
+const DROPDOWN_STRUCTURE_TODO = {
+    code: 'dropdown.structure',
+    marker: 'human',
+    message: 'Dropdown was left in legacy markup because it is not a supported one-toggle/one-menu pattern. Check adjacent dropdown TODOs for the unsupported feature.'
+};
+const DROPDOWN_AUTO_CLOSE_TODO = {
+    code: 'dropdown.auto-close',
+    marker: 'human',
+    message: 'Legacy autoClose behavior was not migrated. Verify the old dismissal behavior manually.'
+};
+const DROPDOWN_DYNAMIC_TOGGLE_CLASS_TODO = {
+    code: 'dropdown.dynamic-toggle-class',
+    message: 'Dynamic dropdown toggle classes were not migrated. Check whether they still target legacy button classes.'
+};
+const DROPDOWN_ANCHOR_TODO = {
+    code: 'dropdown.anchor',
+    marker: 'human',
+    message: 'ngbDropdownAnchor is not supported by the new dropdown API. Rebuild the anchor/toggle relationship manually with a supported toggle or another overlay component.'
+};
+const DROPDOWN_SPLIT_TODO = {
+    code: 'dropdown.split',
+    marker: 'human',
+    message: 'Split dropdown button structure was not migrated. Rebuild the split button manually.'
+};
+const DROPDOWN_RICH_MENU_TODO = {
+    code: 'dropdown.rich-menu',
+    marker: 'human',
+    message: 'Dropdown menu contains non-item content. This is not supported by the new dropdown API and will not be supported in future versions. Rebuild it with supported dropdown items or another overlay component.'
+};
+const DROPDOWN_DATEPICKER_TODO = {
+    code: 'dropdown.datepicker',
+    marker: 'human',
+    message: 'Dropdown menu contains an ng-bootstrap datepicker. Datepicker-in-dropdown content is not supported by the new dropdown API. Rebuild it with a datepicker component or another dedicated overlay.'
+};
+const DROPDOWN_CUSTOM_POSITIONING_TODO = {
+    code: 'dropdown.custom-positioning',
+    marker: 'human',
+    message: 'Legacy dropdown positioning configuration was not fully migrated. Verify placement and overlay behavior.'
+};
+const DROPDOWN_CUSTOM_MENU_CLASSES_TODO = {
+    code: 'dropdown.custom-menu-classes',
+    marker: 'human',
+    message: 'Dropdown menu has custom classes. Verify whether the styling still applies to the new overlay.'
+};
+const DROPDOWN_UNSUPPORTED_ITEM_HOST_TODO = {
+    code: 'dropdown.unsupported-item-host',
+    marker: 'human',
+    message: 'ngbDropdownItem is used on an unsupported host. Convert it to a button or link manually.'
+};
+const DROPDOWN_ICON_ONLY_ACCESSIBLE_NAME_TODO = {
+    code: 'dropdown.icon-only-accessible-name',
+    marker: 'human',
+    message: 'Icon-only dropdown toggle needs an accessible name.'
+};
+const DROPDOWN_BTN_LINK_TOGGLE_TODO = {
+    code: 'dropdown.btn-link-toggle',
+    marker: 'human',
+    message: 'btn-link dropdown toggle styling has no direct deterministic visual migration. Verify manually.'
+};
+const DROPDOWN_PROGRAMMATIC_API_TODO = {
+    code: 'dropdown.programmatic-api',
+    marker: 'human',
+    message: 'Programmatic NgbDropdown API usage was not migrated. Replace open, close, toggle, isOpen, ViewChild, ViewChildren, and template-reference usage with the new API manually.'
+};
+function editDropdownTemplateTodos(element, edits, context) {
+    const todos = [];
+    if (context.migrated) {
+        todos.push(DROPDOWN_REVIEW_TODO);
+    }
+    if (context.structure) {
+        todos.push(DROPDOWN_STRUCTURE_TODO);
+    }
+    if (context.dynamicToggleClass) {
+        todos.push(DROPDOWN_DYNAMIC_TOGGLE_CLASS_TODO);
+    }
+    if (context.autoClose) {
+        todos.push(DROPDOWN_AUTO_CLOSE_TODO);
+    }
+    if (context.anchor) {
+        todos.push(DROPDOWN_ANCHOR_TODO);
+    }
+    if (context.split) {
+        todos.push(DROPDOWN_SPLIT_TODO);
+    }
+    if (context.datepicker) {
+        todos.push(DROPDOWN_DATEPICKER_TODO);
+    }
+    if (context.richMenu) {
+        todos.push(DROPDOWN_RICH_MENU_TODO);
+    }
+    if (context.customPositioning) {
+        todos.push(DROPDOWN_CUSTOM_POSITIONING_TODO);
+    }
+    if (context.customMenuClasses) {
+        todos.push(DROPDOWN_CUSTOM_MENU_CLASSES_TODO);
+    }
+    if (context.unsupportedItemHost) {
+        todos.push(DROPDOWN_UNSUPPORTED_ITEM_HOST_TODO);
+    }
+    if (context.iconOnlyMissingAccessibleName) {
+        todos.push(DROPDOWN_ICON_ONLY_ACCESSIBLE_NAME_TODO);
+    }
+    if (context.btnLinkToggle) {
+        todos.push(DROPDOWN_BTN_LINK_TOGGLE_TODO);
+    }
+    if (context.programmaticApi) {
+        todos.push(DROPDOWN_PROGRAMMATIC_API_TODO);
+    }
+    (0, todo_comments_1.editTemplateTodos)(element, todos, edits);
+}

package/schematics/component-migration/dropdown/steps/template-toggle.d.ts

@@ -0,0 +1,9 @@
+import { TmplAstElement } from '@angular/compiler';
+import { TemplateEdit } from '../../shared/template-edits';
+import { StandaloneImportRequirement } from '../../shared/types';
+import { DropdownTemplateTodoContext } from './template-todos';
+export declare function hasSplitPattern(toggle: TmplAstElement, wrapper: TmplAstElement): boolean;
+export declare function editToggle(toggle: TmplAstElement, referenceName: string, edits: TemplateEdit[]): {
+    todos: DropdownTemplateTodoContext;
+    imports: StandaloneImportRequirement[];
+};

package/schematics/component-migration/dropdown/steps/template-toggle.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasSplitPattern = hasSplitPattern;
+exports.editToggle = editToggle;
+const compiler_1 = require("@angular/compiler");
+const template_edits_1 = require("../../shared/template-edits");
+const button_visual_classes_1 = require("../../shared/button-visual-classes");
+const template_imports_1 = require("./template-imports");
+const template_todos_1 = require("./template-todos");
+const template_helpers_1 = require("./template-helpers");
+function hasTemplateTextContent(node) {
+    if (node instanceof compiler_1.TmplAstText) {
+        return node.value.trim() !== '';
+    }
+    if (node instanceof compiler_1.TmplAstBoundText) {
+        return node.sourceSpan.toString().trim() !== '';
+    }
+    const nodeWithChildren = node;
+    return nodeWithChildren.children?.some(hasTemplateTextContent) ?? false;
+}
+function hasIconOnlyAccessibleName(element) {
+    return (element.attributes.some((attribute) => ['aria-label', 'aria-labelledby', 'prefixAriaLabelledby'].includes(attribute.name) &&
+        attribute.value.trim() !== '') ||
+        element.inputs.some((input) => ['aria-label', 'aria-labelledby', 'prefixAriaLabelledby'].includes(input.name)) ||
+        hasTemplateTextContent(element));
+}
+function hasDynamicLegacyToggleClassBinding(element) {
+    return element.inputs.some((input) => input.type === compiler_1.BindingType.Class && 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 hasSplitPattern(toggle, wrapper) {
+    return [...(0, template_edits_1.getStaticClassTokens)(toggle), ...(0, template_edits_1.getStaticClassTokens)(wrapper)].some((className) => ['dropdown-toggle-split', 'df-dropdown-split', 'btn-group'].includes(className));
+}
+function editToggle(toggle, referenceName, edits) {
+    const todos = {};
+    const toggleAttribute = (0, template_helpers_1.getDropdownAttribute)(toggle, 'ngbDropdownToggle') ?? (0, template_helpers_1.getDropdownAttribute)(toggle, 'dropdownToggle');
+    const migratedButtonAttribute = (0, template_edits_1.findTextAttribute)(toggle, 'dfButton');
+    const classes = (0, template_edits_1.getStaticClassTokens)(toggle);
+    const visual = (0, button_visual_classes_1.getStaticButtonVisual)(classes);
+    const attributes = [`[dfDropdownToggle]="${referenceName}"`];
+    if (toggleAttribute) {
+        edits.push((0, template_helpers_1.removeAttribute)(toggleAttribute));
+    }
+    if (migratedButtonAttribute) {
+        edits.push((0, template_helpers_1.removeAttribute)(migratedButtonAttribute));
+    }
+    if (visual) {
+        attributes.push(...(0, button_visual_classes_1.getButtonVisualAttributes)(visual, { includeIconOnly: true }));
+        (0, template_helpers_1.editStaticClassTokens)(toggle, new Set([...(0, button_visual_classes_1.getRemovableButtonVisualClasses)(visual), 'dropdown-toggle']), edits);
+    }
+    else {
+        (0, template_helpers_1.editStaticClassTokens)(toggle, new Set(['dropdown-toggle']), edits);
+    }
+    if (classes.includes('btn-link')) {
+        todos.btnLinkToggle = true;
+    }
+    if (hasDynamicLegacyToggleClassBinding(toggle) ||
+        (classes.includes('btn') && hasGenericDynamicClassBinding(toggle))) {
+        todos.dynamicToggleClass = true;
+    }
+    if ((0, button_visual_classes_1.hasIconOnlyButtonClasses)(classes) && !hasIconOnlyAccessibleName(toggle)) {
+        todos.iconOnlyMissingAccessibleName = true;
+    }
+    (0, template_helpers_1.insertStartTagAttributes)(toggle, attributes, edits);
+    (0, template_todos_1.editDropdownTemplateTodos)(toggle, edits, todos);
+    return { todos, imports: [template_imports_1.DROPDOWN_IMPORTS.toggle] };
+}

package/schematics/component-migration/dropdown/steps/template-wrapper.d.ts

@@ -0,0 +1,12 @@
+import { TmplAstElement } from '@angular/compiler';
+import { TemplateEdit } from '../../shared/template-edits';
+import { DropdownTemplateTodoContext } from './template-todos';
+export interface DropdownTemplateContext {
+    usedReferenceNames: Set<string>;
+}
+export declare function getUniqueReferenceName(context: DropdownTemplateContext): string;
+export declare function getProgrammaticReferenceName(element: TmplAstElement): string | null;
+export declare function getDropdownReferenceName(element: TmplAstElement, context: DropdownTemplateContext): string;
+export declare function getMovedWrapperAttributes(wrapper: TmplAstElement, menu: TmplAstElement): string[];
+export declare function editWrapper(wrapper: TmplAstElement, edits: TemplateEdit[]): void;
+export declare function getUnsupportedWrapperTodos(wrapper: TmplAstElement): DropdownTemplateTodoContext;