@clr/angular 17.13.0 → 18.0.0-beta.10

package/package.json

@@ -17,35 +17,219 @@
   "bugs": {
     "url": "https://github.com/vmware-clarity/ng-clarity/issues"
   },
+  "schematics": "./schematics/collection.json",
+  "ng-update": {
+    "migrations": "./schematics/collection.json"
+  },
   "peerDependencies": {
-    "@angular/cdk": "15 || 16 || 17 || 18 || 19",
-    "@angular/common": "15 || 16 || 17 || 18 || 19",
-    "@angular/core": "15 || 16 || 17 || 18 || 19",
-    "@cds/core": ">= 6.9.2",
-    "@clr/ui": "17.13.0"
+    "@angular/cdk": ">= 21.1.0",
+    "@angular/common": ">= 21.1.0",
+    "@angular/core": ">= 21.1.0",
+    "@clr/ui": "18.0.0-beta.10"
   },
-  "module": "fesm2015/clr-angular.mjs",
-  "es2020": "fesm2020/clr-angular.mjs",
-  "esm2020": "esm2020/clr-angular.mjs",
-  "fesm2020": "fesm2020/clr-angular.mjs",
-  "fesm2015": "fesm2015/clr-angular.mjs",
-  "typings": "index.d.ts",
+  "module": "fesm2022/clr-angular.mjs",
+  "typings": "types/clr-angular.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
-      "esm2020": "./esm2020/clr-angular.mjs",
-      "es2020": "./fesm2020/clr-angular.mjs",
-      "es2015": "./fesm2015/clr-angular.mjs",
-      "node": "./fesm2015/clr-angular.mjs",
-      "default": "./fesm2020/clr-angular.mjs"
+      "types": "./types/clr-angular.d.ts",
+      "default": "./fesm2022/clr-angular.mjs"
+    },
+    "./accordion": {
+      "types": "./types/clr-angular-accordion.d.ts",
+      "default": "./fesm2022/clr-angular-accordion.mjs"
+    },
+    "./button": {
+      "types": "./types/clr-angular-button.d.ts",
+      "default": "./fesm2022/clr-angular-button.mjs"
+    },
+    "./collapsible-panel": {
+      "types": "./types/clr-angular-collapsible-panel.d.ts",
+      "default": "./fesm2022/clr-angular-collapsible-panel.mjs"
+    },
+    "./data": {
+      "types": "./types/clr-angular-data.d.ts",
+      "default": "./fesm2022/clr-angular-data.mjs"
+    },
+    "./data/datagrid": {
+      "types": "./types/clr-angular-data-datagrid.d.ts",
+      "default": "./fesm2022/clr-angular-data-datagrid.mjs"
+    },
+    "./data/stack-view": {
+      "types": "./types/clr-angular-data-stack-view.d.ts",
+      "default": "./fesm2022/clr-angular-data-stack-view.mjs"
+    },
+    "./data/tree-view": {
+      "types": "./types/clr-angular-data-tree-view.d.ts",
+      "default": "./fesm2022/clr-angular-data-tree-view.mjs"
+    },
+    "./emphasis": {
+      "types": "./types/clr-angular-emphasis.d.ts",
+      "default": "./fesm2022/clr-angular-emphasis.mjs"
+    },
+    "./emphasis/alert": {
+      "types": "./types/clr-angular-emphasis-alert.d.ts",
+      "default": "./fesm2022/clr-angular-emphasis-alert.mjs"
+    },
+    "./emphasis/badge": {
+      "types": "./types/clr-angular-emphasis-badge.d.ts",
+      "default": "./fesm2022/clr-angular-emphasis-badge.mjs"
+    },
+    "./emphasis/common": {
+      "types": "./types/clr-angular-emphasis-common.d.ts",
+      "default": "./fesm2022/clr-angular-emphasis-common.mjs"
+    },
+    "./emphasis/label": {
+      "types": "./types/clr-angular-emphasis-label.d.ts",
+      "default": "./fesm2022/clr-angular-emphasis-label.mjs"
+    },
+    "./forms": {
+      "types": "./types/clr-angular-forms.d.ts",
+      "default": "./fesm2022/clr-angular-forms.mjs"
+    },
+    "./forms/checkbox": {
+      "types": "./types/clr-angular-forms-checkbox.d.ts",
+      "default": "./fesm2022/clr-angular-forms-checkbox.mjs"
+    },
+    "./forms/combobox": {
+      "types": "./types/clr-angular-forms-combobox.d.ts",
+      "default": "./fesm2022/clr-angular-forms-combobox.mjs"
+    },
+    "./forms/common": {
+      "types": "./types/clr-angular-forms-common.d.ts",
+      "default": "./fesm2022/clr-angular-forms-common.mjs"
+    },
+    "./forms/datalist": {
+      "types": "./types/clr-angular-forms-datalist.d.ts",
+      "default": "./fesm2022/clr-angular-forms-datalist.mjs"
+    },
+    "./forms/datepicker": {
+      "types": "./types/clr-angular-forms-datepicker.d.ts",
+      "default": "./fesm2022/clr-angular-forms-datepicker.mjs"
+    },
+    "./forms/file-input": {
+      "types": "./types/clr-angular-forms-file-input.d.ts",
+      "default": "./fesm2022/clr-angular-forms-file-input.mjs"
+    },
+    "./forms/input": {
+      "types": "./types/clr-angular-forms-input.d.ts",
+      "default": "./fesm2022/clr-angular-forms-input.mjs"
+    },
+    "./forms/number-input": {
+      "types": "./types/clr-angular-forms-number-input.d.ts",
+      "default": "./fesm2022/clr-angular-forms-number-input.mjs"
+    },
+    "./forms/password": {
+      "types": "./types/clr-angular-forms-password.d.ts",
+      "default": "./fesm2022/clr-angular-forms-password.mjs"
+    },
+    "./forms/radio": {
+      "types": "./types/clr-angular-forms-radio.d.ts",
+      "default": "./fesm2022/clr-angular-forms-radio.mjs"
+    },
+    "./forms/range": {
+      "types": "./types/clr-angular-forms-range.d.ts",
+      "default": "./fesm2022/clr-angular-forms-range.mjs"
+    },
+    "./forms/select": {
+      "types": "./types/clr-angular-forms-select.d.ts",
+      "default": "./fesm2022/clr-angular-forms-select.mjs"
+    },
+    "./forms/textarea": {
+      "types": "./types/clr-angular-forms-textarea.d.ts",
+      "default": "./fesm2022/clr-angular-forms-textarea.mjs"
+    },
+    "./icon": {
+      "types": "./types/clr-angular-icon.d.ts",
+      "default": "./fesm2022/clr-angular-icon.mjs"
+    },
+    "./layout": {
+      "types": "./types/clr-angular-layout.d.ts",
+      "default": "./fesm2022/clr-angular-layout.mjs"
+    },
+    "./layout/breadcrumbs": {
+      "types": "./types/clr-angular-layout-breadcrumbs.d.ts",
+      "default": "./fesm2022/clr-angular-layout-breadcrumbs.mjs"
+    },
+    "./layout/main-container": {
+      "types": "./types/clr-angular-layout-main-container.d.ts",
+      "default": "./fesm2022/clr-angular-layout-main-container.mjs"
+    },
+    "./layout/nav": {
+      "types": "./types/clr-angular-layout-nav.d.ts",
+      "default": "./fesm2022/clr-angular-layout-nav.mjs"
+    },
+    "./layout/tabs": {
+      "types": "./types/clr-angular-layout-tabs.d.ts",
+      "default": "./fesm2022/clr-angular-layout-tabs.mjs"
+    },
+    "./layout/vertical-nav": {
+      "types": "./types/clr-angular-layout-vertical-nav.d.ts",
+      "default": "./fesm2022/clr-angular-layout-vertical-nav.mjs"
+    },
+    "./modal": {
+      "types": "./types/clr-angular-modal.d.ts",
+      "default": "./fesm2022/clr-angular-modal.mjs"
+    },
+    "./popover": {
+      "types": "./types/clr-angular-popover.d.ts",
+      "default": "./fesm2022/clr-angular-popover.mjs"
+    },
+    "./popover/common": {
+      "types": "./types/clr-angular-popover-common.d.ts",
+      "default": "./fesm2022/clr-angular-popover-common.mjs"
+    },
+    "./popover/dropdown": {
+      "types": "./types/clr-angular-popover-dropdown.d.ts",
+      "default": "./fesm2022/clr-angular-popover-dropdown.mjs"
+    },
+    "./popover/signpost": {
+      "types": "./types/clr-angular-popover-signpost.d.ts",
+      "default": "./fesm2022/clr-angular-popover-signpost.mjs"
+    },
+    "./popover/tooltip": {
+      "types": "./types/clr-angular-popover-tooltip.d.ts",
+      "default": "./fesm2022/clr-angular-popover-tooltip.mjs"
+    },
+    "./progress/progress-bars": {
+      "types": "./types/clr-angular-progress-progress-bars.d.ts",
+      "default": "./fesm2022/clr-angular-progress-progress-bars.mjs"
+    },
+    "./progress/spinner": {
+      "types": "./types/clr-angular-progress-spinner.d.ts",
+      "default": "./fesm2022/clr-angular-progress-spinner.mjs"
+    },
+    "./stepper": {
+      "types": "./types/clr-angular-stepper.d.ts",
+      "default": "./fesm2022/clr-angular-stepper.mjs"
+    },
+    "./timeline": {
+      "types": "./types/clr-angular-timeline.d.ts",
+      "default": "./fesm2022/clr-angular-timeline.mjs"
+    },
+    "./utils": {
+      "types": "./types/clr-angular-utils.d.ts",
+      "default": "./fesm2022/clr-angular-utils.mjs"
+    },
+    "./utils/conditional": {
+      "types": "./types/clr-angular-utils-conditional.d.ts",
+      "default": "./fesm2022/clr-angular-utils-conditional.mjs"
+    },
+    "./utils/loading": {
+      "types": "./types/clr-angular-utils-loading.d.ts",
+      "default": "./fesm2022/clr-angular-utils-loading.mjs"
+    },
+    "./wizard": {
+      "types": "./types/clr-angular-wizard.d.ts",
+      "default": "./fesm2022/clr-angular-wizard.mjs"
     }
   },
   "sideEffects": false,
+  "type": "module",
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "version": "17.13.0"
+  "version": "18.0.0-beta.10"
 }

package/popover/common/README.md

@@ -0,0 +1,112 @@
+# ClrPopover Utilities
+
+The `ClrPopover` implementation is a utility infrastructure based on the Angular Overlay and Portals implementation provided in the Angular CDK. It is not a standalone component, but a set of directives and services used to build Clarity overlay components like **Dropdowns**, **Signposts**, and **Tooltips**.
+
+## Goal
+
+The goal is to provide a straightforward utility within the Clarity library that allows for popover-like elements to use a consistent API. It offloads all positioning, z-indexing, and layering logic to the Angular CDK, which is better equipped to handle complex rendering situations.
+
+## Architecture
+
+At its most basic, the popover utility is implemented with a set of directives and a service to track, manage, and subscribe to state change events.
+
+### Service: `ClrPopoverService`
+
+The **`ClrPopoverService`** acts as the central state manager for a specific popover instance. It is **transient** and must be provided at the component level (e.g., inside `ClrDropdown`, `ClrSignpost`, or `ClrTooltip`) to ensure that each popover maintains its own isolated state.
+
+The service is responsible for:
+
+- **State Management**:
+  - **`open`**: A boolean property to get or set the current visibility state of the popover. Setting this triggers the `openChange` observable.
+  - **`position`**: Tracks the current `ClrPopoverPosition` (e.g., `bottom-left`), triggering the `getPositionChange()` stream when updated.
+  - **`popoverType`**: Defines the type of popover (Tooltip, Signpost, etc.) to determine offset calculations.
+
+- **Event Handling**:
+  - **`toggleWithEvent(event: any)`**: A helper method used by triggers. It toggles the `open` state, stores the triggering event (to prevent conflicts like "click outside" closing immediately), and prevents default scrolling behavior for arrow keys.
+  - **`openEvent`**: Stores the specific browser event that triggered the opening of the popover.
+
+- **Focus & Origin Management**:
+  - **`origin`**: Holds the `FlexibleConnectedPositionStrategyOrigin` — either an `ElementRef` (trigger element) or a `ClrPopoverPoint` (`{ x, y }` coordinate). This is used by the CDK to calculate where the overlay should appear.
+  - **`originElement`**: Convenience getter that returns the origin as `ElementRef<HTMLElement>` when element-based, or `null` when point-based.
+  - **`originPoint`**: Convenience getter that returns the origin as `ClrPopoverPoint` when point-based, or `null` when element-based.
+  - **`closeButtonRef`**: Holds the `ElementRef` of the internal close button (if applicable).
+  - **`focusOrigin()`**: A utility method to return focus to the origin element (e.g., when the menu closes), ensuring accessibility compliance. No-op for point-based origins.
+  - **`focusCloseButton()`**: Moves focus to the close button inside the content when appropriate.
+
+- **Reactive Streams**:
+  - **`openChange`**: Observable that emits whenever the open state changes.
+  - **`popoverVisible`**: Observable used to coordinate when the DOM is actually ready/visible.
+  - **`getEventChange()`**: Observable stream of the events that triggered state changes.
+
+### Directives
+
+1.  **`[clrPopoverOrigin]`**:
+
+- Used on the element that serves as the reference point for positioning.
+- Passes an `ElementRef` to the service as the `origin`, which is used for focus management and positioning calculations.
+
+2.  **`*clrPopoverContent`**:
+
+- A structural directive that renders the view and hoists it to an Overlay on the `body` element using a `DomPortal`.
+- Accepts configuration arguments for the overlay (open state, position, outside click behavior, scroll behavior).
+- Manages "Click Outside" and "Scroll to Close" logic.
+
+3.  **`[clrPopoverCloseButton]`**:
+
+- Should only be used inside popover content containers.
+- Calls the toggle method on the service and restores focus to the origin element.
+
+4.  **`[clrPopoverOpenCloseButton]`**:
+
+- Handles toggling the popover content open and closed via the popover service.
+- Typically used on triggers (e.g., the button that opens a menu).
+
+### ClrPopoverContent Inputs
+
+The `*clrPopoverContent` directive is the "workhorse" of the utility. It accepts several inputs to configure behavior:
+
+- **`clrPopoverContent`** (boolean):
+  - Controls the open/closed state of the popover. When true, the overlay is created and attached; when false, it is detached.
+- **`clrPopoverContentAt`** (`ClrPopoverPosition | ConnectedPosition`):
+  - Defines the preferred position of the content relative to the origin (e.g., `top-right`, `bottom-left`). It sets the `preferredPosition` for the CDK overlay.
+- **`clrPopoverContentAvailablePositions`** (`ConnectedPosition[]`):
+  - A prioritized list of fallback positions the overlay can attempt to use if the preferred position does not fit within the viewport.
+- **`clrPopoverContentType`** (`ClrPopoverType`):
+  - Specifies the type of popover (e.g., `DROPDOWN`, `TOOLTIP`, `SIGNPOST`). This determines specific offsets and behavior variations associated with that type.
+- **`clrPopoverContentOutsideClickToClose`** (boolean):
+  - Determines if clicking outside the popover content should automatically close it. Defaults to `true`.
+- **`clrPopoverContentScrollToClose`** (boolean):
+  - Determines if scrolling the page should automatically close the popover. Defaults to `false`.
+
+## Enums
+
+1.  **`ClrPopoverType`**: Describes the popover variation: `SIGNPOST`, `TOOLTIP`, `DROPDOWN`, and `DEFAULT`.
+2.  **`ClrPopoverPosition`**: Describes the popover position relative to the origin (e.g., `top-left`, `bottom-right`).
+3.  **`ClrPosition`**: Describes the specific point of contact on both the origin and content elements.
+
+---
+
+## Usage Example
+
+To use the popover utility, a host component must provide the `ClrPopoverService`. Components generally provide a `ClrPopoverPosition` via the `at` input to describe the preferred content position.
+
+```html
+<button class="btn" clrPopoverOpenCloseButton clrPopoverOrigin [attr.aria-owns]="popoverId">
+  <cds-icon shape="home"></cds-icon> Popover Origin
+</button>
+<div
+  [id]="popoverId"
+  role="dialog"
+  cdkTrapFocus
+  *clrPopoverContent="open;
+    at: position; availablePositions: [...]; outsideClickToClose: true; scrollToClose: true"
+>
+  <div role="heading">
+    Overlay Header
+    <button class="btn btn-sm btn-outline-neutral btn-icon" clrPopoverCloseButton>
+      <cds-icon shape="times"></cds-icon>
+    </button>
+  </div>
+  <div>Overlay Content</div>
+</div>
+```

package/schematics/collection.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-update": {
+      "version": "18.0.0",
+      "description": "Migrates @clr/angular from v17 to v18",
+      "factory": "./ng-update/index#migrate"
+    },
+    "migrate-v18": {
+      "description": "Applies automated @clr/angular v17→v18 source migrations (templates, imports, CSS). Run with: ng generate @clr/angular:migrate-v18",
+      "factory": "./ng-update/index#migrate"
+    }
+  }
+}

package/schematics/ng-update/index.d.ts

@@ -0,0 +1,2 @@
+import { Rule } from '@angular-devkit/schematics';
+export declare function migrate(): Rule;

package/schematics/ng-update/index.js

@@ -0,0 +1,69 @@
+"use strict";
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrate = migrate;
+const schematics_1 = require("@angular-devkit/schematics");
+const css_migration_1 = require("./migrations/css-migration");
+const import_migration_1 = require("./migrations/import-migration");
+const template_migration_1 = require("./migrations/template-migration");
+const file_visitor_1 = require("./utils/file-visitor");
+/**
+ * All candidate strings that may appear in .ts source files.
+ * Used as a fast-path pre-check to skip files that need no migration.
+ */
+const TS_CANDIDATES = [
+    ...import_migration_1.IMPORT_MIGRATION_CANDIDATES,
+    ...template_migration_1.TEMPLATE_MIGRATION_INLINE_CANDIDATES,
+    ...css_migration_1.CSS_MIGRATION_INLINE_CANDIDATES,
+];
+/**
+ * Single-pass migration for TypeScript source files.
+ *
+ * Reads each .ts file exactly once, applies import, inline-template, and
+ * inline-style transforms in sequence, then writes it if changed.
+ * This is more efficient than visiting .ts files separately in each migration
+ * because each file is read and written at most once.
+ */
+function migrateTypeScriptFiles() {
+    return (tree, context) => {
+        context.logger.info('  Migrating TypeScript files (imports, inline templates, inline styles)');
+        let scanCount = 0;
+        let updateCount = 0;
+        (0, file_visitor_1.visitFiles)(tree, '**/*.ts', filePath => {
+            scanCount++;
+            const content = tree.read(filePath);
+            if (!content) {
+                return;
+            }
+            const original = content.toString('utf-8');
+            // Fast-path: skip entirely if no candidate string is present anywhere.
+            if (!TS_CANDIDATES.some(c => original.includes(c))) {
+                return;
+            }
+            let text = original;
+            text = (0, import_migration_1.transformImports)(text);
+            text = (0, template_migration_1.transformInlineTemplates)(text);
+            text = (0, css_migration_1.transformInlineStyles)(text);
+            if (text !== original) {
+                tree.overwrite(filePath, text);
+                updateCount++;
+                context.logger.info(`    UPDATE ${filePath}`);
+            }
+        });
+        context.logger.info(`  ${updateCount} of ${scanCount} file(s) updated.`);
+    };
+}
+function migrate() {
+    return (tree, context) => {
+        context.logger.info('');
+        context.logger.info('Running @clr/angular v18 migration...');
+        context.logger.info('');
+        return (0, schematics_1.chain)([migrateTypeScriptFiles(), (0, template_migration_1.migrateTemplates)(), (0, css_migration_1.migrateCssProperties)()])(tree, context);
+    };
+}
+//# sourceMappingURL=index.js.map

package/schematics/ng-update/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../projects/angular/schematics/ng-update/index.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;;AAyEH,0BAQC;AA/ED,2DAAiF;AAEjF,8DAIoC;AACpC,oEAA8F;AAC9F,wEAIyC;AACzC,uDAAkD;AAElD;;;GAGG;AACH,MAAM,aAAa,GAAsB;IACvC,GAAG,8CAA2B;IAC9B,GAAG,yDAAoC;IACvC,GAAG,+CAA+B;CACnC,CAAC;AAEF;;;;;;;GAOG;AACH,SAAS,sBAAsB;IAC7B,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,yEAAyE,CAAC,CAAC;QAE/F,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,IAAI,WAAW,GAAG,CAAC,CAAC;QAEpB,IAAA,yBAAU,EAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE;YACrC,SAAS,EAAE,CAAC;YAEZ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACpC,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAO;YACT,CAAC;YAED,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAE3C,uEAAuE;YACvE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACnD,OAAO;YACT,CAAC;YAED,IAAI,IAAI,GAAG,QAAQ,CAAC;YACpB,IAAI,GAAG,IAAA,mCAAgB,EAAC,IAAI,CAAC,CAAC;YAC9B,IAAI,GAAG,IAAA,6CAAwB,EAAC,IAAI,CAAC,CAAC;YACtC,IAAI,GAAG,IAAA,qCAAqB,EAAC,IAAI,CAAC,CAAC;YAEnC,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;gBACtB,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;gBAC/B,WAAW,EAAE,CAAC;gBACd,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,QAAQ,EAAE,CAAC,CAAC;YAChD,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,WAAW,OAAO,SAAS,mBAAmB,CAAC,CAAC;IAC3E,CAAC,CAAC;AACJ,CAAC;AAED,SAAgB,OAAO;IACrB,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACxB,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC;QAC7D,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAExB,OAAO,IAAA,kBAAK,EAAC,CAAC,sBAAsB,EAAE,EAAE,IAAA,qCAAgB,GAAE,EAAE,IAAA,oCAAoB,GAAE,CAAC,CAAC,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACtG,CAAC,CAAC;AACJ,CAAC"}

package/schematics/ng-update/migrations/css-migration.d.ts

@@ -0,0 +1,6 @@
+import { Rule } from '@angular-devkit/schematics';
+export declare const CSS_MIGRATION_CANDIDATES: readonly string[];
+export declare const CSS_MIGRATION_INLINE_CANDIDATES: readonly string[];
+export declare function transformInlineStyles(text: string): string;
+export declare function migrateCssProperties(): Rule;
+export declare function applyStyleTransforms(text: string, filePath: string | null): string;

package/schematics/ng-update/migrations/css-migration.js

@@ -0,0 +1,177 @@
+"use strict";
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CSS_MIGRATION_INLINE_CANDIDATES = exports.CSS_MIGRATION_CANDIDATES = void 0;
+exports.transformInlineStyles = transformInlineStyles;
+exports.migrateCssProperties = migrateCssProperties;
+exports.applyStyleTransforms = applyStyleTransforms;
+const css_replacements_1 = require("../replacements/css-replacements");
+const file_visitor_1 = require("../utils/file-visitor");
+const regexp_utils_1 = require("../utils/regexp-utils");
+// ---------------------------------------------------------------------------
+// Pre-compiled regex arrays — built once at module load, not per-file
+// ---------------------------------------------------------------------------
+// Negative lookahead (?![-\w]) ensures a CSS custom property name that is a
+// prefix of a longer one (e.g. --clr-foo--active inside --clr-foo--active-extra)
+// is NOT matched, preventing false-positive renames.
+const COMPILED_PROPERTY_RENAME_REGEXES = css_replacements_1.CSS_PROPERTY_REPLACEMENTS.filter(r => r.new).map(r => ({
+    old: r.old,
+    new: r.new,
+    regex: (0, regexp_utils_1.prefixNegativeLookaheadRegex)(r.old),
+}));
+const COMPILED_PROPERTY_REMOVE_REGEXES = css_replacements_1.CSS_PROPERTY_REPLACEMENTS.filter(r => !r.new).map(r => ({
+    old: r.old,
+    regex: new RegExp(`(\\s*)(${(0, regexp_utils_1.escapeRegExp)(r.old)}(?![-\\w])\\s*:[^;]*;)`, 'g'),
+}));
+const COMPILED_SELECTOR_REGEXES = css_replacements_1.CSS_SELECTOR_REPLACEMENTS.map(r => ({
+    old: r.old,
+    new: r.new,
+    regex: (0, regexp_utils_1.wordBoundaryRegex)(r.old),
+}));
+const COMPILED_ATTRIBUTE_REGEXES = css_replacements_1.CSS_ATTRIBUTE_REPLACEMENTS.map(r => ({
+    old: r.old,
+    new: r.new,
+    regex: new RegExp((0, regexp_utils_1.escapeRegExp)(r.old), 'g'),
+}));
+const COMPILED_MIXIN_REGEXES = css_replacements_1.REMOVED_SCSS_MIXINS.map(name => ({
+    name,
+    regex: new RegExp(`@include\\s+${(0, regexp_utils_1.escapeRegExp)(name)}\\s*\\([^)]*\\)\\s*;`, 'g'),
+}));
+// ---------------------------------------------------------------------------
+// Fast-path candidate strings
+// ---------------------------------------------------------------------------
+exports.CSS_MIGRATION_CANDIDATES = [
+    ...css_replacements_1.CSS_PROPERTY_REPLACEMENTS.map(r => r.old),
+    ...css_replacements_1.CSS_SELECTOR_REPLACEMENTS.map(r => r.old),
+    ...css_replacements_1.CSS_ATTRIBUTE_REPLACEMENTS.map(r => r.old),
+    ...css_replacements_1.REMOVED_SCSS_MIXINS,
+];
+exports.CSS_MIGRATION_INLINE_CANDIDATES = exports.CSS_MIGRATION_CANDIDATES;
+// ---------------------------------------------------------------------------
+// Public pure transforms — used by the unified .ts pass in index.ts
+// ---------------------------------------------------------------------------
+function transformInlineStyles(text) {
+    const stylesRegex = /styles\s*:\s*\[([^\]]*)\]/g;
+    return text.replace(stylesRegex, (match, stylesContent) => {
+        if (!exports.CSS_MIGRATION_INLINE_CANDIDATES.some(c => stylesContent.includes(c))) {
+            return match;
+        }
+        const updated = applyStyleTransforms(stylesContent, null);
+        return updated !== stylesContent ? match.replace(stylesContent, updated) : match;
+    });
+}
+// ---------------------------------------------------------------------------
+// Schematic Rule — visits style files and .ts inline styles
+// ---------------------------------------------------------------------------
+function migrateCssProperties() {
+    return (tree, context) => {
+        context.logger.info('  Migrating style files (CSS, SCSS, Sass, Less)');
+        let styleScanCount = 0;
+        let styleUpdateCount = 0;
+        let tsScanCount = 0;
+        let tsUpdateCount = 0;
+        (0, file_visitor_1.visitFiles)(tree, '**/*.{css,scss,sass,less}', filePath => {
+            styleScanCount++;
+            const content = tree.read(filePath);
+            if (!content) {
+                return;
+            }
+            const original = content.toString('utf-8');
+            if (!exports.CSS_MIGRATION_CANDIDATES.some(c => original.includes(c))) {
+                return;
+            }
+            const updated = applyStyleTransforms(original, filePath);
+            if (updated !== original) {
+                tree.overwrite(filePath, updated);
+                styleUpdateCount++;
+                context.logger.info(`    UPDATE ${filePath}`);
+            }
+        });
+        (0, file_visitor_1.visitFiles)(tree, '**/*.ts', filePath => {
+            tsScanCount++;
+            const content = tree.read(filePath);
+            if (!content) {
+                return;
+            }
+            const original = content.toString('utf-8');
+            if (!exports.CSS_MIGRATION_INLINE_CANDIDATES.some(c => original.includes(c))) {
+                return;
+            }
+            const updated = transformInlineStyles(original);
+            if (updated !== original) {
+                tree.overwrite(filePath, updated);
+                tsUpdateCount++;
+                context.logger.info(`    UPDATE ${filePath}`);
+            }
+        });
+        const totalScanned = styleScanCount + tsScanCount;
+        const totalUpdated = styleUpdateCount + tsUpdateCount;
+        context.logger.info(`  ${totalUpdated} of ${totalScanned} file(s) updated.`);
+    };
+}
+// ---------------------------------------------------------------------------
+// Helpers — exported for direct testing; not part of the public schematic API
+// ---------------------------------------------------------------------------
+function applyStyleTransforms(text, filePath) {
+    text = replaceCssProperties(text);
+    text = replaceCssSelectors(text);
+    text = replaceCssAttributes(text);
+    const isScssSass = filePath === null || filePath.endsWith('.scss') || filePath.endsWith('.sass');
+    if (isScssSass) {
+        text = replaceScssMixins(text);
+    }
+    return text;
+}
+function replaceCssProperties(text) {
+    for (const r of COMPILED_PROPERTY_RENAME_REGEXES) {
+        if (!text.includes(r.old)) {
+            continue;
+        }
+        r.regex.lastIndex = 0;
+        text = text.replace(r.regex, r.new);
+    }
+    for (const r of COMPILED_PROPERTY_REMOVE_REGEXES) {
+        if (!text.includes(r.old)) {
+            continue;
+        }
+        r.regex.lastIndex = 0;
+        text = text.replace(r.regex, `$1/* TODO(v18 migration): '${r.old}' has been removed. */ /* $2 */`);
+    }
+    return text;
+}
+function replaceCssSelectors(text) {
+    for (const r of COMPILED_SELECTOR_REGEXES) {
+        if (!text.includes(r.old)) {
+            continue;
+        }
+        r.regex.lastIndex = 0;
+        text = text.replace(r.regex, r.new);
+    }
+    return text;
+}
+function replaceCssAttributes(text) {
+    for (const r of COMPILED_ATTRIBUTE_REGEXES) {
+        if (!text.includes(r.old)) {
+            continue;
+        }
+        r.regex.lastIndex = 0;
+        text = text.replace(r.regex, r.new);
+    }
+    return text;
+}
+function replaceScssMixins(text) {
+    for (const r of COMPILED_MIXIN_REGEXES) {
+        if (!text.includes(r.name)) {
+            continue;
+        }
+        r.regex.lastIndex = 0;
+        text = text.replace(r.regex, `/* TODO(v18 migration): '@include ${r.name}(...)' has been removed. */`);
+    }
+    return text;
+}
+//# sourceMappingURL=css-migration.js.map

package/schematics/ng-update/migrations/css-migration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-migration.js","sourceRoot":"","sources":["../../../../../projects/angular/schematics/ng-update/migrations/css-migration.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;;;AAiEH,sDAUC;AAMD,oDAuDC;AAMD,oDAWC;AArJD,uEAK0C;AAC1C,wDAAmD;AACnD,wDAAsG;AAEtG,8EAA8E;AAC9E,sEAAsE;AACtE,8EAA8E;AAE9E,4EAA4E;AAC5E,iFAAiF;AACjF,qDAAqD;AACrD,MAAM,gCAAgC,GAAG,4CAAyB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC9F,GAAG,EAAE,CAAC,CAAC,GAAG;IACV,GAAG,EAAE,CAAC,CAAC,GAAG;IACV,KAAK,EAAE,IAAA,2CAA4B,EAAC,CAAC,CAAC,GAAG,CAAC;CAC3C,CAAC,CAAC,CAAC;AAEJ,MAAM,gCAAgC,GAAG,4CAAyB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC/F,GAAG,EAAE,CAAC,CAAC,GAAG;IACV,KAAK,EAAE,IAAI,MAAM,CAAC,UAAU,IAAA,2BAAY,EAAC,CAAC,CAAC,GAAG,CAAC,wBAAwB,EAAE,GAAG,CAAC;CAC9E,CAAC,CAAC,CAAC;AAEJ,MAAM,yBAAyB,GAAG,4CAAyB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACpE,GAAG,EAAE,CAAC,CAAC,GAAG;IACV,GAAG,EAAE,CAAC,CAAC,GAAG;IACV,KAAK,EAAE,IAAA,gCAAiB,EAAC,CAAC,CAAC,GAAG,CAAC;CAChC,CAAC,CAAC,CAAC;AAEJ,MAAM,0BAA0B,GAAG,6CAA0B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IACtE,GAAG,EAAE,CAAC,CAAC,GAAG;IACV,GAAG,EAAE,CAAC,CAAC,GAAG;IACV,KAAK,EAAE,IAAI,MAAM,CAAC,IAAA,2BAAY,EAAC,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC;CAC5C,CAAC,CAAC,CAAC;AAEJ,MAAM,sBAAsB,GAAG,sCAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC9D,IAAI;IACJ,KAAK,EAAE,IAAI,MAAM,CAAC,eAAe,IAAA,2BAAY,EAAC,IAAI,CAAC,sBAAsB,EAAE,GAAG,CAAC;CAChF,CAAC,CAAC,CAAC;AAEJ,8EAA8E;AAC9E,8BAA8B;AAC9B,8EAA8E;AAEjE,QAAA,wBAAwB,GAAsB;IACzD,GAAG,4CAAyB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;IAC5C,GAAG,4CAAyB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;IAC5C,GAAG,6CAA0B,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;IAC7C,GAAG,sCAAmB;CACvB,CAAC;AAEW,QAAA,+BAA+B,GAAG,gCAAwB,CAAC;AAExE,8EAA8E;AAC9E,oEAAoE;AACpE,8EAA8E;AAE9E,SAAgB,qBAAqB,CAAC,IAAY;IAChD,MAAM,WAAW,GAAG,4BAA4B,CAAC;IAEjD,OAAO,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,aAAqB,EAAE,EAAE;QAChE,IAAI,CAAC,uCAA+B,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;YAC1E,OAAO,KAAK,CAAC;QACf,CAAC;QACD,MAAM,OAAO,GAAG,oBAAoB,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;QAC1D,OAAO,OAAO,KAAK,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IACnF,CAAC,CAAC,CAAC;AACL,CAAC;AAED,8EAA8E;AAC9E,4DAA4D;AAC5D,8EAA8E;AAE9E,SAAgB,oBAAoB;IAClC,OAAO,CAAC,IAAU,EAAE,OAAyB,EAAE,EAAE;QAC/C,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,iDAAiD,CAAC,CAAC;QAEvE,IAAI,cAAc,GAAG,CAAC,CAAC;QACvB,IAAI,gBAAgB,GAAG,CAAC,CAAC;QACzB,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,IAAI,aAAa,GAAG,CAAC,CAAC;QAEtB,IAAA,yBAAU,EAAC,IAAI,EAAE,2BAA2B,EAAE,QAAQ,CAAC,EAAE;YACvD,cAAc,EAAE,CAAC;YAEjB,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACpC,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAO;YACT,CAAC;YAED,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAC3C,IAAI,CAAC,gCAAwB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC9D,OAAO;YACT,CAAC;YAED,MAAM,OAAO,GAAG,oBAAoB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;YACzD,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;gBACzB,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;gBAClC,gBAAgB,EAAE,CAAC;gBACnB,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,QAAQ,EAAE,CAAC,CAAC;YAChD,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAA,yBAAU,EAAC,IAAI,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE;YACrC,WAAW,EAAE,CAAC;YAEd,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YACpC,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAO;YACT,CAAC;YAED,MAAM,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAC3C,IAAI,CAAC,uCAA+B,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACrE,OAAO;YACT,CAAC;YAED,MAAM,OAAO,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;YAChD,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;gBACzB,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;gBAClC,aAAa,EAAE,CAAC;gBAChB,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,QAAQ,EAAE,CAAC,CAAC;YAChD,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,MAAM,YAAY,GAAG,cAAc,GAAG,WAAW,CAAC;QAClD,MAAM,YAAY,GAAG,gBAAgB,GAAG,aAAa,CAAC;QACtD,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,YAAY,OAAO,YAAY,mBAAmB,CAAC,CAAC;IAC/E,CAAC,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,8EAA8E;AAC9E,8EAA8E;AAE9E,SAAgB,oBAAoB,CAAC,IAAY,EAAE,QAAuB;IACxE,IAAI,GAAG,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAClC,IAAI,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACjC,IAAI,GAAG,oBAAoB,CAAC,IAAI,CAAC,CAAC;IAElC,MAAM,UAAU,GAAG,QAAQ,KAAK,IAAI,IAAI,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACjG,IAAI,UAAU,EAAE,CAAC;QACf,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,oBAAoB,CAAC,IAAY;IACxC,KAAK,MAAM,CAAC,IAAI,gCAAgC,EAAE,CAAC;QACjD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YAC1B,SAAS;QACX,CAAC;QACD,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC;QACtB,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;IACtC,CAAC;IACD,KAAK,MAAM,CAAC,IAAI,gCAAgC,EAAE,CAAC;QACjD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YAC1B,SAAS;QACX,CAAC;QACD,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC;QACtB,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,8BAA8B,CAAC,CAAC,GAAG,iCAAiC,CAAC,CAAC;IACrG,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,mBAAmB,CAAC,IAAY;IACvC,KAAK,MAAM,CAAC,IAAI,yBAAyB,EAAE,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YAC1B,SAAS;QACX,CAAC;QACD,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC;QACtB,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;IACtC,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,oBAAoB,CAAC,IAAY;IACxC,KAAK,MAAM,CAAC,IAAI,0BAA0B,EAAE,CAAC;QAC3C,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YAC1B,SAAS;QACX,CAAC;QACD,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC;QACtB,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC;IACtC,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,iBAAiB,CAAC,IAAY;IACrC,KAAK,MAAM,CAAC,IAAI,sBAAsB,EAAE,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;YAC3B,SAAS;QACX,CAAC;QACD,CAAC,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC;QACtB,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,qCAAqC,CAAC,CAAC,IAAI,6BAA6B,CAAC,CAAC;IACzG,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}

package/schematics/ng-update/migrations/import-migration.d.ts

@@ -0,0 +1,4 @@
+import { Rule } from '@angular-devkit/schematics';
+export declare const IMPORT_MIGRATION_CANDIDATES: readonly string[];
+export declare function transformImports(text: string): string;
+export declare function migrateImports(): Rule;