From d79e4b6981c29f9c8226e1298079b9643b2cfa03 Mon Sep 17 00:00:00 2001 From: lskramarov Date: Mon, 1 Jun 2026 17:33:05 +0300 Subject: [PATCH 1/8] chore(docs): added a migration guide to angular 20 --- CHANGELOG.md | 152 ------------------ .../src/app/components/sidenav/sidenav.ts | 4 +- .../components/welcome/welcome.component.ts | 4 +- apps/docs/src/app/structure.ts | 18 +++ docs/guides/angular-20-breaking-changes.en.md | 142 ++++++++++++++++ docs/guides/angular-20-breaking-changes.ru.md | 142 ++++++++++++++++ docs/guides/migration.en.md | 37 ++++- docs/guides/migration.ru.md | 37 ++++- tools/cspell-locales/en.json | 1 + tools/cspell-locales/ru.json | 17 +- 10 files changed, 389 insertions(+), 165 deletions(-) create mode 100644 docs/guides/angular-20-breaking-changes.en.md create mode 100644 docs/guides/angular-20-breaking-changes.ru.md diff --git a/CHANGELOG.md b/CHANGELOG.md index 7f451abc47..17206740ee 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,155 +1,3 @@ -# 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` 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 `` 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` (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 (``) — removed. Use `` instead. Note: `kbq-search-expandable` requires a `FormControl`/`NgModel` binding. - -#### Removed form-field directives - -* **`KbqDatepickerToggle`** component (``) — removed. Use `` (`KbqDatepickerToggleIconComponent`) instead. -* **`KbqFormFieldWithoutBorders`** directive (``) — removed. Use the `noBorders` input on `KbqFormField`: ``. - -#### Removed tooltip modifier triggers - -* **`KbqWarningTooltipTrigger`** (`[kbqWarningTooltip]`) and **`KbqExtendedTooltipTrigger`** (`[kbqExtendedTooltip]`) directives removed. Use the base `[kbqTooltip]` directive with the new public `kbqTooltipModifier` input: - - ```html - - - - - - ``` - - For the extended variant, `[kbqTooltipHeader]` is now also exposed on the base trigger: - - ```html - - + + + ``` + + `KbqDatepickerInput.kbqValidationTooltip` and `KbqTimepicker.kbqValidationTooltip` setters now accept `KbqTooltipTrigger` (the base class) instead of `KbqWarningTooltipTrigger`. + +### Migration + +Consumers can run the automatic migration: + +```bash +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 (`` → ``, `` → ``, `` → ``, `` → ``). +- 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 `` — switch to `(onSave)` and branch on `$event.status === 'newFilter'`. +- `[customValidation]` / `[errors]` on file-upload components — use `FormControl` validators / read `FormControl.errors`. +- `[apps]` on ` + + + ``` + + Сеттеры `KbqDatepickerInput.kbqValidationTooltip` и `KbqTimepicker.kbqValidationTooltip` теперь принимают `KbqTooltipTrigger` (базовый класс) вместо `KbqWarningTooltipTrigger`. + +### Миграция + +Потребители могут запустить автоматическую миграцию: + +```bash +ng update @koobiq/components@20 +``` + +Она вызывает схематик `v20-upgrade`, который переписывает ваш код на месте: + +- Импорты из `@koobiq/components/navbar-ic` / `risk-level` / `components-experimental/form-field` переназначаются на сохранившиеся пакеты (`navbar`, `badge`, `components/form-field`). +- Переименования идентификаторов в `.ts`-файлах (`KbqNavbarIc*` → `Kbq*`, `KbqRiskLevel*` → `KbqBadge*`, `KbqWarningTooltipTrigger` / `KbqExtendedTooltipTrigger` → `KbqTooltipTrigger`, `KbqDatepickerToggle` → `KbqDatepickerToggleIconComponent`, `KbqFilterBarSearch` → `KbqSearchExpandable`, `RdxAccordionItemState` → `KbqAccordionItemState`, `KbqCodeFile` → `KbqCodeBlockFile`, `AnimationCurves` → `KbqAnimationCurves`, `MeasurementSystem` → `KbqMeasurementSystem`, `SizeUnitsConfig` → `KbqSizeUnitsConfig`, `KbqFormFieldRef` → `KbqFormField`). +- Переименования токенов / функций (`toBoolean(` → `booleanAttribute(`, `isCorrectExtension(` → `FileValidators.isCorrectExtension(`, `formatDataSize(` → `getFormattedSizeParts(`, `kbqComponentParams:` → `data:`); удалённые токены `KBQ_VALIDATION`, `KBQ_SANITY_CHECKS`, `KBQ_SIDEPANEL_WITH_SHADOW` убраны из импортов. +- Переименования методов инстансов (`.openPanel(` → `.open(`, `.toggleIsCollapsed(` → `.toggle(`, `.focusViaKeyboard(` → `.focus(`). +- Селекторы в шаблонах (`` → ``, `` → ``, `` → ``, `` → ``). +- Атрибуты в шаблонах (`kbqFormFieldWithoutBorders` → `noBorders`, `[kbqWarningTooltip]` → `kbqTooltipModifier="warning" [kbqTooltip]`, `[kbqExtendedTooltip]` → `kbqTooltipModifier="extended" [kbqTooltip]`, template-ref `="kbqWarningTooltip"` → `="kbqTooltip"`). +- CSS-классы в SCSS (`.kbq-risk-level` → `.kbq-badge`, `.kbq-navbar-ic` → `.kbq-navbar` и т. д.). + +Схематик выводит предупреждения для структурных изменений, которые нельзя безопасно исправить автоматически: + +- Слушатели `(onSaveAsNew)` у `` — перейдите на `(onSave)` и ветвитесь по `$event.status === 'newFilter'`. +- `[customValidation]` / `[errors]` у компонентов file-upload — используйте валидаторы `FormControl` / читайте `FormControl.errors`. +- `[apps]` у ` + + +``` + +`KbqDatepickerInput.kbqValidationTooltip` and `KbqTimepicker.kbqValidationTooltip` setters now accept `KbqTooltipTrigger` (the base class) instead of `KbqWarningTooltipTrigger`. + +### Migration + +Consumers can run the automatic migration: + +```bash +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`, and `components-experimental/form-field` are remapped to the surviving packages (`navbar`, `badge`, `components/form-field`). Identifiers in `.ts` files are renamed: `KbqNavbarIc*` → `Kbq*`, `KbqRiskLevel*` → `KbqBadge*`, `KbqWarningTooltipTrigger` / `KbqExtendedTooltipTrigger` → `KbqTooltipTrigger`, `KbqDatepickerToggle` → `KbqDatepickerToggleIconComponent`, `KbqFilterBarSearch` → `KbqSearchExpandable`, `RdxAccordionItemState` → `KbqAccordionItemState`, `KbqCodeFile` → `KbqCodeBlockFile`, `AnimationCurves` → `KbqAnimationCurves`, `MeasurementSystem` → `KbqMeasurementSystem`, `SizeUnitsConfig` → `KbqSizeUnitsConfig`, `KbqFormFieldRef` → `KbqFormField`. Tokens and functions are renamed: `toBoolean(` → `booleanAttribute(`, `isCorrectExtension(` → `FileValidators.isCorrectExtension(`, `formatDataSize(` → `getFormattedSizeParts(`, `kbqComponentParams:` → `data:`; dropped tokens `KBQ_VALIDATION`, `KBQ_SANITY_CHECKS`, `KBQ_SIDEPANEL_WITH_SHADOW` are removed from imports. Instance methods are renamed: `.openPanel(` → `.open(`, `.toggleIsCollapsed(` → `.toggle(`, `.focusViaKeyboard(` → `.focus(`. Template selectors are updated: `` → ``, `` → ``, `` → ``, `` → ``. Template attributes are updated: `kbqFormFieldWithoutBorders` → `noBorders`, `[kbqWarningTooltip]` → `kbqTooltipModifier="warning" [kbqTooltip]`, `[kbqExtendedTooltip]` → `kbqTooltipModifier="extended" [kbqTooltip]`, template-ref `="kbqWarningTooltip"` → `="kbqTooltip"`. SCSS class selectors are updated: `.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 `` must be switched to `(onSave)` with branching on `$event.status === 'newFilter'`; `[customValidation]` / `[errors]` on file-upload components must be replaced with `FormControl` validators / `FormControl.errors`; `[apps]` on ` + + +``` + +**Datepicker, Timepicker**. Сеттеры KbqDatepickerInput.kbqValidationTooltip и KbqTimepicker.kbqValidationTooltip теперь принимают KbqTooltipTrigger (базовый класс) вместо KbqWarningTooltipTrigger. + +### Миграция + +**V20 upgrade**. Потребители могут запустить автоматическую миграцию с помощью команды `ng update @koobiq/components@20`. Она вызывает схематик `v20-upgrade`, который переписывает ваш код на месте. + +**Импорты и пакеты**. Импорты из @koobiq/components/navbar-ic, risk-level и components-experimental/form-field переназначаются на сохранившиеся пакеты (navbar, badge, components/form-field). + +**Идентификаторы в .ts файлах**. Переименованы идентификаторы: + +| Старое имя | Новое имя | +|-----------|-----------| +| KbqNavbarIc* | Kbq* | +| KbqRiskLevel* | KbqBadge* | +| KbqWarningTooltipTrigger | KbqTooltipTrigger | +| KbqExtendedTooltipTrigger | KbqTooltipTrigger | +| KbqDatepickerToggle | KbqDatepickerToggleIconComponent | +| KbqFilterBarSearch | KbqSearchExpandable | +| RdxAccordionItemState | KbqAccordionItemState | +| KbqCodeFile | KbqCodeBlockFile | +| AnimationCurves | KbqAnimationCurves | +| MeasurementSystem | KbqMeasurementSystem | +| SizeUnitsConfig | KbqSizeUnitsConfig | +| KbqFormFieldRef | KbqFormField | + +**Токены и функции**. Обновляются: toBoolean( → booleanAttribute(, isCorrectExtension( → FileValidators.isCorrectExtension(, formatDataSize( → getFormattedSizeParts(, kbqComponentParams: → data:; + +Убираются из импортов удаленные токены: KBQ_VALIDATION,KBQ_SANITY_CHECKS, KBQ_SIDEPANEL_WITH_SHADOW + +**Методы инстансов**. Обновляются: .openPanel( → .open(, .toggleIsCollapsed( → .toggle(, .focusViaKeyboard( → .focus(. + +**Селекторы в шаблонах**. Обновляются: `` → ``, `` → ``, `` → ``, `` → ``. + +**Атрибуты в шаблонах**. Обновляются: `kbqFormFieldWithoutBorders` → `noBorders`, `[kbqWarningTooltip]` → `kbqTooltipModifier="warning" [kbqTooltip]`, `[kbqExtendedTooltip]` → `kbqTooltipModifier="extended" [kbqTooltip]`, template-ref `="kbqWarningTooltip"` → `="kbqTooltip"`. + +**CSS классы в SCSS**. Обновляются: `.kbq-risk-level` → `.kbq-badge`, `.kbq-navbar-ic` → `.kbq-navbar` и т. д. + +**Ручные исправления**. Схематик выводит предупреждения для структурных изменений, которые нельзя безопасно исправить автоматически: слушатели `(onSaveAsNew)` у `` нужно перевести на `(onSave)` с ветвлением по `$event.status === 'newFilter'`; атрибуты `[customValidation]` / `[errors]` у file-upload компонентов нужно заменить валидаторами `FormControl`; атрибут `[apps]` у ` - - -``` - -`KbqDatepickerInput.kbqValidationTooltip` and `KbqTimepicker.kbqValidationTooltip` setters now accept `KbqTooltipTrigger` (the base class) instead of `KbqWarningTooltipTrigger`. - -### Migration - -Consumers can run the automatic migration: - -```bash -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`, and `components-experimental/form-field` are remapped to the surviving packages (`navbar`, `badge`, `components/form-field`). Identifiers in `.ts` files are renamed: `KbqNavbarIc*` → `Kbq*`, `KbqRiskLevel*` → `KbqBadge*`, `KbqWarningTooltipTrigger` / `KbqExtendedTooltipTrigger` → `KbqTooltipTrigger`, `KbqDatepickerToggle` → `KbqDatepickerToggleIconComponent`, `KbqFilterBarSearch` → `KbqSearchExpandable`, `RdxAccordionItemState` → `KbqAccordionItemState`, `KbqCodeFile` → `KbqCodeBlockFile`, `AnimationCurves` → `KbqAnimationCurves`, `MeasurementSystem` → `KbqMeasurementSystem`, `SizeUnitsConfig` → `KbqSizeUnitsConfig`, `KbqFormFieldRef` → `KbqFormField`. Tokens and functions are renamed: `toBoolean(` → `booleanAttribute(`, `isCorrectExtension(` → `FileValidators.isCorrectExtension(`, `formatDataSize(` → `getFormattedSizeParts(`, `kbqComponentParams:` → `data:`; dropped tokens `KBQ_VALIDATION`, `KBQ_SANITY_CHECKS`, `KBQ_SIDEPANEL_WITH_SHADOW` are removed from imports. Instance methods are renamed: `.openPanel(` → `.open(`, `.toggleIsCollapsed(` → `.toggle(`, `.focusViaKeyboard(` → `.focus(`. Template selectors are updated: `` → ``, `` → ``, `` → ``, `` → ``. Template attributes are updated: `kbqFormFieldWithoutBorders` → `noBorders`, `[kbqWarningTooltip]` → `kbqTooltipModifier="warning" [kbqTooltip]`, `[kbqExtendedTooltip]` → `kbqTooltipModifier="extended" [kbqTooltip]`, template-ref `="kbqWarningTooltip"` → `="kbqTooltip"`. SCSS class selectors are updated: `.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 `` must be switched to `(onSave)` with branching on `$event.status === 'newFilter'`; `[customValidation]` / `[errors]` on file-upload components must be replaced with `FormControl` validators / `FormControl.errors`; `[apps]` on ` - - -``` - -**Datepicker, Timepicker**. Сеттеры KbqDatepickerInput.kbqValidationTooltip и KbqTimepicker.kbqValidationTooltip теперь принимают KbqTooltipTrigger (базовый класс) вместо KbqWarningTooltipTrigger. - -### Миграция - -**V20 upgrade**. Потребители могут запустить автоматическую миграцию с помощью команды `ng update @koobiq/components@20`. Она вызывает схематик `v20-upgrade`, который переписывает ваш код на месте. - -**Импорты и пакеты**. Импорты из @koobiq/components/navbar-ic, risk-level и components-experimental/form-field переназначаются на сохранившиеся пакеты (navbar, badge, components/form-field). - -**Идентификаторы в .ts файлах**. Переименованы идентификаторы: - -| Старое имя | Новое имя | -| ------------------------- | -------------------------------- | -| KbqNavbarIc\* | KbqNavbar\* | -| KbqRiskLevel\* | KbqBadge\* | -| KbqWarningTooltipTrigger | KbqTooltipTrigger | -| KbqExtendedTooltipTrigger | KbqTooltipTrigger | -| KbqDatepickerToggle | KbqDatepickerToggleIconComponent | -| KbqFilterBarSearch | KbqSearchExpandable | -| RdxAccordionItemState | KbqAccordionItemState | -| KbqCodeFile | KbqCodeBlockFile | -| AnimationCurves | KbqAnimationCurves | -| MeasurementSystem | KbqMeasurementSystem | -| SizeUnitsConfig | KbqSizeUnitsConfig | -| KbqFormFieldRef | KbqFormField | - -**Токены и функции**. Обновляются: toBoolean( → booleanAttribute(, isCorrectExtension( → FileValidators.isCorrectExtension(, formatDataSize( → getFormattedSizeParts(, kbqComponentParams: → data:; - -Убираются из импортов удаленные токены: KBQ_VALIDATION,KBQ_SANITY_CHECKS, KBQ_SIDEPANEL_WITH_SHADOW - -**Методы инстансов**. Обновляются: .openPanel( → .open(, .toggleIsCollapsed( → .toggle(, .focusViaKeyboard( → .focus(. - -**Селекторы в шаблонах**. Обновляются: `` → ``, `` → ``, `` → ``, `` → ``. - -**Атрибуты в шаблонах**. Обновляются: `kbqFormFieldWithoutBorders` → `noBorders`, `[kbqWarningTooltip]` → `kbqTooltipModifier="warning" [kbqTooltip]`, `[kbqExtendedTooltip]` → `kbqTooltipModifier="extended" [kbqTooltip]`, template-ref `="kbqWarningTooltip"` → `="kbqTooltip"`. - -**CSS классы в SCSS**. Обновляются: `.kbq-risk-level` → `.kbq-badge`, `.kbq-navbar-ic` → `.kbq-navbar` и т. д. - -**Ручные исправления**. Схематик выводит предупреждения для структурных изменений, которые нельзя безопасно исправить автоматически: слушатели `(onSaveAsNew)` у `` нужно перевести на `(onSave)` с ветвлением по `$event.status === 'newFilter'`; атрибуты `[customValidation]` / `[errors]` у file-upload компонентов нужно заменить валидаторами `FormControl`; атрибут `[apps]` у ` - - - ``` +**App switcher**. On the trigger, KbqAppSwitcherTrigger.apps has been replaced with `sites` taking a single-element array. - `KbqDatepickerInput.kbqValidationTooltip` and `KbqTimepicker.kbqValidationTooltip` setters now accept `KbqTooltipTrigger` (the base class) instead of `KbqWarningTooltipTrigger`. +#### Validation -### Migration +The **KbqValidateDirective** directive has been removed entirely. The new behavior relies solely on **ErrorStateMatcher**. Consumers who relied on the legacy "show errors only after blur/submit" pattern should explicitly wire up **ShowOnSubmitErrorStateMatcher** (or a similar one) via the **errorStateMatcher** inputs or the **ErrorStateMatcher** provider. The "lazy validation" behavior is no longer available (not showing required until submit). + +#### File upload validation API + +- The KbqInputFile and KbqInputFileLabel interfaces have been removed, and the KbqFileValidatorFn type has also been removed. +- The isCorrectExtension() function has been replaced with FileValidators.isCorrectExtension (a ValidatorFn). +- `KbqMultipleFileUploadComponent`: `errors`, `customValidation`, and `hasErrors` have been removed — use `FormControl.errors` and `FormControl` validators. +- KbqSingleFileUploadComponent: errors and customValidation have been removed — same as above. + +#### Modal API + +**ModalOptions.kbqComponentParams** is replaced with the **data** field plus **inject(KBQ_MODAL_DATA)** in the child component. The @Input KbqModalComponent.kbqComponentParams has been removed. -Consumers can run the automatic migration: +#### Filter bar API -```bash -ng update @koobiq/components@20 +**Filter bar**. The KbqFilters.onSaveAsNew output has been replaced with `onSave` carrying `status === 'newFilter'`. The KbqFilterBarSearch component `` has been removed — use ``; note that kbq-search-expandable requires a FormControl/NgModel binding. + +#### Form field directives + +The KbqDatepickerToggle component (``) has been removed — use `` (KbqDatepickerToggleIconComponent). + +The KbqFormFieldWithoutBorders directive (``) has been removed — use the noBorders input on KbqFormField: ``. + +#### Tooltip modifier triggers + +The KbqWarningTooltipTrigger (`[kbqWarningTooltip]`) and KbqExtendedTooltipTrigger (`[kbqExtendedTooltip]`) directives have been removed. Use the base `[kbqTooltip]` directive with the new public `kbqTooltipModifier` input: + +```html + +
+ +
``` -This invokes the `v20-upgrade` schematic which rewrites your codebase in place: +For the extended variant, `[kbqTooltipHeader]` is now also available on the base trigger: + +```html + + + + +``` + +**Datepicker, Timepicker**. The KbqDatepickerInput.kbqValidationTooltip and KbqTimepicker.kbqValidationTooltip setters now accept KbqTooltipTrigger (the base class) instead of KbqWarningTooltipTrigger. + +### Migration + +**V20 upgrade**. Consumers can run the automatic migration with the `ng update @koobiq/components@20` command. It invokes the `v20-upgrade` schematic, which rewrites your code in place. + +**Imports and packages**. Imports from @koobiq/components/navbar-ic, risk-level, and components-experimental/form-field are remapped to the surviving packages (navbar, badge, components/form-field). + +**Identifiers in .ts files**. The following identifiers have been renamed: + +| Old name | New name | +| ------------------------- | -------------------------------- | +| KbqNavbarIc\* | KbqNavbar\* | +| KbqRiskLevel\* | KbqBadge\* | +| KbqWarningTooltipTrigger | KbqTooltipTrigger | +| KbqExtendedTooltipTrigger | KbqTooltipTrigger | +| KbqDatepickerToggle | KbqDatepickerToggleIconComponent | +| KbqFilterBarSearch | KbqSearchExpandable | +| RdxAccordionItemState | KbqAccordionItemState | +| KbqCodeFile | KbqCodeBlockFile | +| AnimationCurves | KbqAnimationCurves | +| MeasurementSystem | KbqMeasurementSystem | +| SizeUnitsConfig | KbqSizeUnitsConfig | +| KbqFormFieldRef | KbqFormField | + +**Tokens and functions**. Updated: toBoolean( → booleanAttribute(, isCorrectExtension( → FileValidators.isCorrectExtension(, formatDataSize( → getFormattedSizeParts(, kbqComponentParams: → data:; + +Removed tokens are stripped from imports: KBQ_VALIDATION, KBQ_SANITY_CHECKS, KBQ_SIDEPANEL_WITH_SHADOW + +**Instance methods**. Updated: .openPanel( → .open(, .toggleIsCollapsed( → .toggle(, .focusViaKeyboard( → .focus(. + +**Selectors in templates**. Updated: `` → ``, `` → ``, `` → ``, `` → ``. -- 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 (`` → ``, `` → ``, `` → ``, `` → ``). -- 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.). +**Attributes in templates**. Updated: `kbqFormFieldWithoutBorders` → `noBorders`, `[kbqWarningTooltip]` → `kbqTooltipModifier="warning" [kbqTooltip]`, `[kbqExtendedTooltip]` → `kbqTooltipModifier="extended" [kbqTooltip]`, the template ref `="kbqWarningTooltip"` → `="kbqTooltip"`. -The schematic prints warnings for structural changes it cannot safely auto-fix: +**CSS classes in SCSS**. Updated: `.kbq-risk-level` → `.kbq-badge`, `.kbq-navbar-ic` → `.kbq-navbar`, etc. -- `(onSaveAsNew)` listeners on `` — switch to `(onSave)` and branch on `$event.status === 'newFilter'`. -- `[customValidation]` / `[errors]` on file-upload components — use `FormControl` validators / read `FormControl.errors`. -- `[apps]` on ` - - - ``` +#### API валидации File upload - Сеттеры `KbqDatepickerInput.kbqValidationTooltip` и `KbqTimepicker.kbqValidationTooltip` теперь принимают `KbqTooltipTrigger` (базовый класс) вместо `KbqWarningTooltipTrigger`. +- Интерфейсы KbqInputFile и KbqInputFileLabel удалены, тип KbqFileValidatorFn также удален. +- Функция isCorrectExtension() заменена на FileValidators.isCorrectExtension (тип ValidatorFn). +- `KbqMultipleFileUploadComponent`: удалены `errors`, `customValidation` и `hasErrors` — используйте `FormControl.errors` и валидаторы `FormControl`. +- KbqSingleFileUploadComponent: удалены errors и customValidation — то же самое. -### Миграция +#### API модальных окон + +**ModalOptions.kbqComponentParams** заменяется полем **data** плюс **inject(KBQ_MODAL_DATA)** в дочернем компоненте. @Input KbqModalComponent.kbqComponentParams удален. -Потребители могут запустить автоматическую миграцию: +#### API Filter bar -```bash -ng update @koobiq/components@20 +**Filter bar**. Output KbqFilters.onSaveAsNew заменен на `onSave` с `status === 'newFilter'`. Компонент KbqFilterBarSearch `` удален — используйте ``; обратите внимание, что kbq-search-expandable требует привязки FormControl/NgModel. + +#### Директивы Form field + +Компонент KbqDatepickerToggle (``) удален — используйте `` (KbqDatepickerToggleIconComponent). + +Директива KbqFormFieldWithoutBorders (``) удалена — используйте input noBorders у KbqFormField: ``. + +#### Триггеры-модификаторы Tooltip + +Директивы KbqWarningTooltipTrigger (`[kbqWarningTooltip]`) и KbqExtendedTooltipTrigger (`[kbqExtendedTooltip]`) удалены. Используйте базовую директиву `[kbqTooltip]` с новым публичным input `kbqTooltipModifier`: + +```html + +
+ +
``` -Она вызывает схематик `v20-upgrade`, который переписывает ваш код на месте: +Для расширенного варианта `[kbqTooltipHeader]` теперь также доступен на базовом триггере: + +```html + + + + +``` + +**Datepicker, Timepicker**. Сеттеры KbqDatepickerInput.kbqValidationTooltip и KbqTimepicker.kbqValidationTooltip теперь принимают KbqTooltipTrigger (базовый класс) вместо KbqWarningTooltipTrigger. + +### Миграция + +**V20 upgrade**. Потребители могут запустить автоматическую миграцию с помощью команды `ng update @koobiq/components@20`. Она вызывает схематик `v20-upgrade`, который переписывает ваш код на месте. + +**Импорты и пакеты**. Импорты из @koobiq/components/navbar-ic, risk-level и components-experimental/form-field переназначаются на сохранившиеся пакеты (navbar, badge, components/form-field). + +**Идентификаторы в .ts файлах**. Переименованы идентификаторы: + +| Старое имя | Новое имя | +| ------------------------- | -------------------------------- | +| KbqNavbarIc\* | KbqNavbar\* | +| KbqRiskLevel\* | KbqBadge\* | +| KbqWarningTooltipTrigger | KbqTooltipTrigger | +| KbqExtendedTooltipTrigger | KbqTooltipTrigger | +| KbqDatepickerToggle | KbqDatepickerToggleIconComponent | +| KbqFilterBarSearch | KbqSearchExpandable | +| RdxAccordionItemState | KbqAccordionItemState | +| KbqCodeFile | KbqCodeBlockFile | +| AnimationCurves | KbqAnimationCurves | +| MeasurementSystem | KbqMeasurementSystem | +| SizeUnitsConfig | KbqSizeUnitsConfig | +| KbqFormFieldRef | KbqFormField | + +**Токены и функции**. Обновляются: toBoolean( → booleanAttribute(, isCorrectExtension( → FileValidators.isCorrectExtension(, formatDataSize( → getFormattedSizeParts(, kbqComponentParams: → data:; + +Убираются из импортов удаленные токены: KBQ_VALIDATION,KBQ_SANITY_CHECKS, KBQ_SIDEPANEL_WITH_SHADOW + +**Методы инстансов**. Обновляются: .openPanel( → .open(, .toggleIsCollapsed( → .toggle(, .focusViaKeyboard( → .focus(. + +**Селекторы в шаблонах**. Обновляются: `` → ``, `` → ``, `` → ``, `` → ``. -- Импорты из `@koobiq/components/navbar-ic` / `risk-level` / `components-experimental/form-field` переназначаются на сохранившиеся пакеты (`navbar`, `badge`, `components/form-field`). -- Переименования идентификаторов в `.ts`-файлах (`KbqNavbarIc*` → `Kbq*`, `KbqRiskLevel*` → `KbqBadge*`, `KbqWarningTooltipTrigger` / `KbqExtendedTooltipTrigger` → `KbqTooltipTrigger`, `KbqDatepickerToggle` → `KbqDatepickerToggleIconComponent`, `KbqFilterBarSearch` → `KbqSearchExpandable`, `RdxAccordionItemState` → `KbqAccordionItemState`, `KbqCodeFile` → `KbqCodeBlockFile`, `AnimationCurves` → `KbqAnimationCurves`, `MeasurementSystem` → `KbqMeasurementSystem`, `SizeUnitsConfig` → `KbqSizeUnitsConfig`, `KbqFormFieldRef` → `KbqFormField`). -- Переименования токенов / функций (`toBoolean(` → `booleanAttribute(`, `isCorrectExtension(` → `FileValidators.isCorrectExtension(`, `formatDataSize(` → `getFormattedSizeParts(`, `kbqComponentParams:` → `data:`); удалённые токены `KBQ_VALIDATION`, `KBQ_SANITY_CHECKS`, `KBQ_SIDEPANEL_WITH_SHADOW` убраны из импортов. -- Переименования методов инстансов (`.openPanel(` → `.open(`, `.toggleIsCollapsed(` → `.toggle(`, `.focusViaKeyboard(` → `.focus(`). -- Селекторы в шаблонах (`` → ``, `` → ``, `` → ``, `` → ``). -- Атрибуты в шаблонах (`kbqFormFieldWithoutBorders` → `noBorders`, `[kbqWarningTooltip]` → `kbqTooltipModifier="warning" [kbqTooltip]`, `[kbqExtendedTooltip]` → `kbqTooltipModifier="extended" [kbqTooltip]`, template-ref `="kbqWarningTooltip"` → `="kbqTooltip"`). -- CSS-классы в SCSS (`.kbq-risk-level` → `.kbq-badge`, `.kbq-navbar-ic` → `.kbq-navbar` и т. д.). +**Атрибуты в шаблонах**. Обновляются: `kbqFormFieldWithoutBorders` → `noBorders`, `[kbqWarningTooltip]` → `kbqTooltipModifier="warning" [kbqTooltip]`, `[kbqExtendedTooltip]` → `kbqTooltipModifier="extended" [kbqTooltip]`, template-ref `="kbqWarningTooltip"` → `="kbqTooltip"`. -Схематик выводит предупреждения для структурных изменений, которые нельзя безопасно исправить автоматически: +**CSS классы в SCSS**. Обновляются: `.kbq-risk-level` → `.kbq-badge`, `.kbq-navbar-ic` → `.kbq-navbar` и т. д. -- Слушатели `(onSaveAsNew)` у `` — перейдите на `(onSave)` и ветвитесь по `$event.status === 'newFilter'`. -- `[customValidation]` / `[errors]` у компонентов file-upload — используйте валидаторы `FormControl` / читайте `FormControl.errors`. -- `[apps]` у `