feat: angular 20 (#DS-5079) (#1585)

Co-authored-by: lskramarov <9027254+lskramarov@users.noreply.github.com>

Author: lskramarov

.eslintignore

@@ -1,5 +1,6 @@
 dist
 node_modules
+coverage
 
 # eslint ignores root level "dot" files by default
 !/.*.js

.eslintrc.js

@@ -242,7 +242,17 @@ const templateRules = {
         '@angular-eslint/template/no-interpolation-in-attributes': 0,
         '@angular-eslint/template/no-any': 0,
         '@angular-eslint/template/prefer-static-string-properties': 0,
-        '@angular-eslint/template/cyclomatic-complexity': 0
+        '@angular-eslint/template/cyclomatic-complexity': 0,
+        // Allow combining a static `class`/`style` attribute with its `[class]`/`[style]` binding.
+        // Angular merges them via styling precedence, so this is a valid pattern (e.g. after the
+        // NgClass -> [class] migration). Genuine duplicates (two static `class`, two `[class]`) are
+        // still reported.
+        '@angular-eslint/template/no-duplicate-attributes': [
+            2,
+            {
+                allowStylePrecedenceDuplicates: true
+            }
+        ]
     }
 };
 
@@ -435,7 +445,11 @@ const toolsRules = {
     files: ['tools/**/*.ts', 'tools/**/*.js'],
     rules: {
         // plugin:eslint
-        'no-console': 0
+        'no-console': 0,
+
+        // plugin:@typescript-eslint
+        // node-only build scripts may use require() for legacy CommonJS modules
+        '@typescript-eslint/no-require-imports': 0
     }
 };
 
@@ -461,7 +475,11 @@ const cliRules = {
     files: ['packages/cli/**/*.ts', 'packages/cli/**/*.js'],
     rules: {
         // plugin:eslint
-        'no-console': 0
+        'no-console': 0,
+
+        // plugin:@typescript-eslint
+        // node-only CLI scripts may use require() for legacy CommonJS modules
+        '@typescript-eslint/no-require-imports': 0
     }
 };
 

.github/workflows/actions/build-packages/entrypoint.sh

@@ -8,10 +8,6 @@ fi
 # Fail fast on errors, unset variables, and failures in piped commands
 set -Eeuo pipefail
 
-echo "::group:: Build CDK ..."
-    yarn run build:cdk
-echo '::endgroup::'
-
 echo "::group:: Build Components ..."
     yarn run build:components
 echo '::endgroup::'

.github/workflows/units.yml

@@ -18,7 +18,6 @@ jobs:
       # Build styles which are required for unit tests
       - run: yarn run styles:build-all
       - run: |
-          yarn run unit:cdk
           yarn run unit:components
           yarn run unit:angular-moment-adapter
           yarn run unit:angular-luxon-adapter

.stylelintignore

@@ -1,5 +1,6 @@
 dist
 node_modules
+coverage
 
 # ignore auto-generated theme
 apps/docs/src/styles/koobiq/default-theme

AGENTS.md

@@ -12,8 +12,7 @@ yarn install
 
 ```
 packages/
-├── cdk/                       # Component Development Kit (a11y, keycodes, testing utils)
-├── components/                # Main library - each subdirectory is a component
+├── components/                # Main library - each subdirectory is a component (a11y, keycodes, testing utils now live in core)
 ├── components-experimental/   # Experimental components (not production-ready)
 ├── docs-examples/             # Documentation examples and components usage
 ├── components-dev/            # Dev apps for each component (yarn run dev:<component-name>)
@@ -48,7 +47,6 @@ packages/components/button/
 
 ```bash
 yarn run build:components               # Build main components library
-yarn run build:cdk                      # Build CDK utilities
 yarn run build:components-experimental  # Build experimental components
 yarn run build:angular-luxon-adapter    # Build Luxon date adapter
 yarn run build:angular-moment-adapter   # Build Moment date adapter
@@ -74,7 +72,6 @@ There are two types of test files per component:
 ```bash
 # Unit tests (Jest)
 yarn run unit:components           # Run component unit tests
-yarn run unit:cdk                  # Run CDK unit tests
 yarn run unit:schematics           # Run schematics tests
 npx jest <TEST_PATH_PATTERN>       # Run specific Jest tests (e.g., npx jest packages/components/button/button.component.spec.ts)
 

CHANGELOG.md

@@ -1,3 +1,155 @@
+# 20.0.0 (2026-05-13)
+
+### BREAKING CHANGES — Angular 20
+
+* **angular:** bump to Angular 20.3.21. `requiredAngularVersion` is now `^20.0.0`. All `peerDependencies` of published packages target `^20.0.0`. Consumers must upgrade to Angular 20+.
+* **node:** minimum supported Node.js is now **20.19** (added `"engines": { "node": ">=20.19" }`).
+* **zone.js:** downgraded to `~0.15.1` to match Angular 20 peer requirement.
+* **components:** `KbqPopUpTrigger` (base of tooltip / popover / notification-center / app-switcher) refactored to use `Signal<T>` for `enterDelay`, `leaveDelay`, `stickToWindow`, `container`, `hideWithTimeout`, `preventClose`, and `arrow` so the existing signal-input overrides in subclasses now type-check. Consumers reading these from the trigger instance must call them as signals (`.enterDelay()`, etc.).
+* **popover:** the runtime-broken `set trigger(value)` mutation of `hideWithTimeout`/`leaveDelay` (added in DS-3677 #851 and silently broken since DS-4749 #1442) is replaced by writable backing signals; `leaveDelay` is now a `computed` signal combining the user input and the hover-mode fallback default of `500ms`.
+* **form-field:** `KbqInput.placeholder`, `KbqInput.errorStateMatcher`, `KbqInputPassword.placeholder`, `KbqInputPassword.errorStateMatcher`, `KbqTextarea.placeholder`, `KbqTextarea.errorStateMatcher`, `KbqSelect.errorStateMatcher`, `KbqTagList.errorStateMatcher`, `KbqTreeSelect.errorStateMatcher`, `KbqSingleFileUploadComponent.errorStateMatcher`, `KbqMultipleFileUploadComponent.errorStateMatcher`, `KbqTagInput.placeholder`/`id` reverted to `@Input` primitives — they conflict with interface types (`CanUpdateErrorState`, `KbqFormFieldControl`, `KbqTagTextControl`) that expect raw values. Template bindings via aliases stay the same.
+* **code-block:** `softWrap`, `viewAll`, `canDownload`, `activeFileIndex` are now `model()` signals (writable + bindable). Bare attribute shorthand `<kbq-code-block canDownload>` no longer coerces — use `[canDownload]="true"`, `[activeFileIndex]="1"`, etc.
+* **textarea:** `freeRowsHeight` is now a `model()` signal; bare attribute shorthand is not supported, use `[freeRowsHeight]="160"`.
+* **search-expandable / dl / radio / checkbox / toggle / sidepanel:** `isOpened` / `vertical` / `name` / `id` / `sidepanelResult` are now `model()` signals (use `.set()` / `.update()` internally; two-way binding `[(x)]` works externally).
+* **modal:** `kbqOkText`, `kbqOkType`, `kbqRestoreFocus`, `kbqCancelText`, `kbqModalType`, `kbqComponent`, `kbqContent`, `kbqComponentParams`, `kbqFooter`, `kbqWidth`, `kbqSize`, `kbqWrapClassName`, `kbqClassName`, `kbqStyle`, `kbqTitle`, `kbqCloseByESC`, `kbqOnOk`, `kbqOnCancel` reverted to plain `@Input`/`@Output` to match `ModalOptions`. Programmatic API (consumed via `KbqModalService`) stays the same.
+* **notification-center / app-switcher:** removed `placement` signal-input overrides (which conflicted with `KbqPopUpTrigger.placement`) — placement is again configured via `@Input('kbqNotificationCenterPlacement')` / `@Input('kbqAppSwitcherPlacement')` getter/setter pattern delegating to `super.updatePlacement(...)`. `arrow` in both is now a `Signal<boolean>` (matches the new base contract).
+* **tabs:** `KbqPaginatedTabHeader.disablePagination` is now a `computed` that combines the user input with a writable fallback set by the `vertical` setter. `KbqTabGroupComponent.animationDuration` is a `computed` that resolves user input → `KBQ_TABS_CONFIG` default → `'0ms'`. `KbqTabLink.disabled` reverted to plain `@Input` (matches `FocusableOption.disabled`).
+* **dropdown:** `KbqDropdown.backdropClass` reverted to `@Input` to match the `KbqDropdownPanel` interface. `KbqDropdownContent` constructor no longer accepts `ComponentFactoryResolver` (removed in Angular 20).
+* **input-number:** dropped `@Attribute('step' | 'big-step' | 'min' | 'max')` constructor coercion; the same defaults are now provided by `input(..., { transform: numberAttribute })`. Template bindings `[step]="..."` still work; bare HTML attributes are coerced through the transform.
+* **breadcrumbs:** `RdxRovingFocusGroupDirective.orientation` is a `computed` signal combining an `orientation` input alias and an internal `setOrientation()` override called by `KbqBreadcrumbs` (replaces the broken `inject(...).orientation = 'horizontal'` assignment).
+* **navbar / navbar-ic / filter-bar / datepicker / timepicker / splitter:** direct assignments to readonly signal inputs (`this.arrow = false`, `this.offset = 0`, `this.popover.preventClose = true`, `tooltip.enterDelay = ...`, `this.ghost.visible = ...`, etc.) cast to `any` to preserve current runtime behavior. The underlying state migration to writable signals is tracked as a follow-up.
+
+### Tooling
+
+* `ng-packagr` → `^20.3.2`.
+* `@angular-builders/jest` → `20.0.0`.
+* `@angular-eslint/*` → `^20.7.0`.
+* `@typescript-eslint/*` → `^8.59.3` (ESLint stays on `8.57.1`).
+* `@schematics/angular` → `20.3.21` (was stuck on `18.2.21`).
+* `@angular-devkit/architect` → `0.2003.21`.
+* Per-project `tsconfig.spec.json` files added under each library/app root that extend the workspace-root config; `angular.json` `test.options.tsConfig` paths now resolve from the project root (required by v20 schematic migrations).
+* Schematics unit tests updated for the v20 `@schematics/angular:application` output (file names changed from `app.component.html` → `app.html`).
+
+### BREAKING CHANGES — Deprecated API removals
+
+Removed long-standing deprecated symbols. Use `ng update @koobiq/components@20` for assisted migration (schematics TBD — track follow-up).
+
+#### Removed packages
+
+* **`@koobiq/components/navbar-ic`** — entire package deleted. Migrate to `@koobiq/components/navbar` (`KbqNavbar`, `KbqNavbarItem`, `KbqNavbarModule`).
+* **`@koobiq/components/risk-level`** — entire package deleted. Migrate to `@koobiq/components/badge` (`KbqBadge` with `[outline]` and `[badgeColor]`). Note: Badge default density and color enum differ — verify visual parity.
+* **`@koobiq/components-experimental/form-field`** — sub-package deleted. Migrate to `@koobiq/components/form-field`. The experimental package was a transitional fork that has been merged back.
+
+#### Removed core symbols
+
+* `AnimationCurves` enum → use `KbqAnimationCurves`.
+* `MeasurementSystem` enum → use `KbqMeasurementSystem`.
+* `SizeUnitsConfig` interface → use `KbqSizeUnitsConfig`.
+* `KbqCommonModule`, `KBQ_SANITY_CHECKS`, `mcSanityChecksFactory` → no longer used.
+* `toBoolean()` → use Angular `booleanAttribute` from `@angular/core`.
+* `RdxAccordionItemState` → use `KbqAccordionItemState`.
+* `KbqCodeFile` → use `KbqCodeBlockFile`.
+* `KBQ_SIDEPANEL_WITH_SHADOW` token → removed.
+* `KbqSidepanelConfig.requiredBackdrop` field → removed (single shared backdrop used).
+* `formatDataSize()` → use `getFormattedSizeParts()`.
+* `getFormattedSizeParts(value, precision, system)` 3-arg overload → use 2-arg `getFormattedSizeParts(value, system)`.
+* `KBQ_VALIDATION` token and `KbqValidationOptions` interface → removed with legacy validation pipeline.
+* `kbqDisableLegacyValidationDirectiveProvider()` — the no-op shim kept after the `KbqValidateDirective` removal is also gone in v20.0.0. Run `ng update @koobiq/components@20` to auto-strip the call sites and import; the schematic also flags the resulting `providers: []` arrays for manual cleanup.
+
+#### Removed component methods / inputs
+
+* `KbqAutocompleteTrigger.openPanel()` → use `open()`.
+* `KbqClampedText.toggleIsCollapsed()` → use `toggle()`.
+* `KbqDivider.inset` input → removed.
+* `KbqTagList`: `multiple`, `compareWith`, `emitOnTagChanges`, `orientation`, `selectionModel`, `tagChanges`, `setSelectionByValue()` — all unused, removed.
+* `KbqTagInput`: `countOfSymbolsForUpdateWidth`, `updateInputWidth()` — unused, removed.
+* `KbqFormField.canShowStepper` → use `hasStepper` (stepper is always visible when provided).
+* `KbqAppSwitcherTrigger.apps` input → use `sites` with a single-element array.
+
+#### Removed validation
+
+* **`KbqValidateDirective`** — legacy validation directive deleted entirely. The new behaviour relies exclusively on `ErrorStateMatcher`. Consumers that relied on the legacy "show errors only after blur/submit" pattern should wire `ShowOnSubmitErrorStateMatcher` (or similar) explicitly via `errorStateMatcher` input or `ErrorStateMatcher` provider. The "lazy validation" behaviour (suppress required-not-shown until submit) is gone.
+
+#### Removed file-upload validation API
+
+* `KbqInputFile`, `KbqInputFileLabel` interfaces — removed.
+* `KbqFileValidatorFn` type → removed.
+* `isCorrectExtension()` function → use `FileValidators.isCorrectExtension` (`ValidatorFn`).
+* `KbqMultipleFileUploadComponent.errors`, `customValidation`, `hasErrors` → use `FormControl.errors` and `FormControl` validators.
+* `KbqSingleFileUploadComponent.errors`, `customValidation` → same.
+
+#### Removed modal API
+
+* `ModalOptions.kbqComponentParams` → use `data` field + `inject(KBQ_MODAL_DATA)` in the child component.
+* `KbqModalComponent.kbqComponentParams` @Input → removed.
+
+#### Removed filter-bar API
+
+* `KbqFilters.onSaveAsNew` Output → use `onSave` with `status === 'newFilter'`.
+* **`KbqFilterBarSearch`** component (`<kbq-filter-search>`) — removed. Use `<kbq-search-expandable [formControl]="searchControl" />` instead. Note: `kbq-search-expandable` requires a `FormControl`/`NgModel` binding.
+
+#### Removed form-field directives
+
+* **`KbqDatepickerToggle`** component (`<kbq-datepicker-toggle>`) — removed. Use `<kbq-datepicker-toggle-icon>` (`KbqDatepickerToggleIconComponent`) instead.
+* **`KbqFormFieldWithoutBorders`** directive (`<kbq-form-field kbqFormFieldWithoutBorders>`) — removed. Use the `noBorders` input on `KbqFormField`: `<kbq-form-field noBorders>`.
+
+#### Removed tooltip modifier triggers
+
+* **`KbqWarningTooltipTrigger`** (`[kbqWarningTooltip]`) and **`KbqExtendedTooltipTrigger`** (`[kbqExtendedTooltip]`) directives removed. Use the base `[kbqTooltip]` directive with the new public `kbqTooltipModifier` input:
+
+  ```html
+  <!-- before -->
+  <kbq-form-field #tooltip="kbqWarningTooltip" [kbqWarningTooltip]="msg">
+
+  <!-- after -->
+  <kbq-form-field #tooltip="kbqTooltip" kbqTooltipModifier="warning" [kbqTooltip]="msg">
+  ```
+
+  For the extended variant, `[kbqTooltipHeader]` is now also exposed on the base trigger:
+
+  ```html
+  <!-- before -->
+  <button [kbqExtendedTooltip]="content" [kbqTooltipHeader]="header">
+
+  <!-- after -->
+  <button kbqTooltipModifier="extended" [kbqTooltip]="content" [kbqTooltipHeader]="header">
+  ```
+
+  `KbqDatepickerInput.kbqValidationTooltip` and `KbqTimepicker.kbqValidationTooltip` setters now accept `KbqTooltipTrigger` (the base class) instead of `KbqWarningTooltipTrigger`.
+
+### Migration
+
+Consumers can run the automatic migration:
+
+```
+ng update @koobiq/components@20
+```
+
+This invokes the `v20-upgrade` schematic which rewrites your codebase in place:
+
+- Imports from `@koobiq/components/navbar-ic` / `risk-level` / `components-experimental/form-field` are remapped to the surviving packages (`navbar`, `badge`, `components/form-field`).
+- Identifier renames in `.ts` files (`KbqNavbarIc*` → `Kbq*`, `KbqRiskLevel*` → `KbqBadge*`, `KbqWarningTooltipTrigger` / `KbqExtendedTooltipTrigger` → `KbqTooltipTrigger`, `KbqDatepickerToggle` → `KbqDatepickerToggleIconComponent`, `KbqFilterBarSearch` → `KbqSearchExpandable`, `RdxAccordionItemState` → `KbqAccordionItemState`, `KbqCodeFile` → `KbqCodeBlockFile`, `AnimationCurves` → `KbqAnimationCurves`, `MeasurementSystem` → `KbqMeasurementSystem`, `SizeUnitsConfig` → `KbqSizeUnitsConfig`, `KbqFormFieldRef` → `KbqFormField`).
+- Token / function renames (`toBoolean(` → `booleanAttribute(`, `isCorrectExtension(` → `FileValidators.isCorrectExtension(`, `formatDataSize(` → `getFormattedSizeParts(`, `kbqComponentParams:` → `data:`); dropped tokens `KBQ_VALIDATION`, `KBQ_SANITY_CHECKS`, `KBQ_SIDEPANEL_WITH_SHADOW` removed from imports.
+- Instance method renames (`.openPanel(` → `.open(`, `.toggleIsCollapsed(` → `.toggle(`, `.focusViaKeyboard(` → `.focus(`).
+- Template selectors (`<kbq-filter-search>` → `<kbq-search-expandable>`, `<kbq-datepicker-toggle>` → `<kbq-datepicker-toggle-icon>`, `<kbq-risk-level>` → `<kbq-badge>`, `<kbq-navbar-ic*>` → `<kbq-navbar*>`).
+- Template attributes (`kbqFormFieldWithoutBorders` → `noBorders`, `[kbqWarningTooltip]` → `kbqTooltipModifier="warning" [kbqTooltip]`, `[kbqExtendedTooltip]` → `kbqTooltipModifier="extended" [kbqTooltip]`, template-ref `="kbqWarningTooltip"` → `="kbqTooltip"`).
+- SCSS class selectors (`.kbq-risk-level` → `.kbq-badge`, `.kbq-navbar-ic` → `.kbq-navbar`, etc.).
+
+The schematic prints warnings for structural changes it cannot safely auto-fix:
+
+- `(onSaveAsNew)` listeners on `<kbq-filters>` — switch to `(onSave)` and branch on `$event.status === 'newFilter'`.
+- `[customValidation]` / `[errors]` on file-upload components — use `FormControl` validators / read `FormControl.errors`.
+- `[apps]` on `<button kbqAppSwitcher>` — wrap into a single-site `[sites]="[{ id, name, apps }]"`.
+
+After the schematic runs, **review the diff before committing**: the migration is regex-based and will not rewrite values held in local variables, re-exports, or aliased imports.
+
+### Known follow-ups
+
+* Refactor remaining `(instance as any).x = value` assignments in navbar / navbar-ic / filter-bar / datepicker / timepicker / splitter to use writable signal backing fields.
+* Refactor `KbqAppSwitcherComponent.trigger` and `KbqAppSwitcherComponent.selectAppInSite` to use the proper component-instance back-reference (currently uses `declare trigger: KbqAppSwitcherTrigger` instead of signal input).
+* Update Jest tests that mutate signal inputs directly (~306 select/option/model-input-related tests need `instance.foo.set(value)` instead of `instance.foo = value`).
+* Run signal-input / signal-queries / output migrations from `@angular/core:ng-generate/*` on the remaining `@Input` getter/setter pairs that survived this PR.
+
 # 19.8.0 (2026-05-26)
 
 ### Koobiq