@koobiq/components 19.0.0 → 19.2.0

package/file-upload/single-file-upload.component.scss

@@ -1,54 +1,135 @@
 @use '../core/styles/common/tokens' as *;
 
-.kbq-single-file-upload .kbq-file-upload {
-    padding: kbq-difference-series-css-variables(
-            [ file-upload-size-single-container-padding-vertical,
-            file-upload-size-single-container-border-width]
-        )
-        kbq-difference-series-css-variables(
-            [ file-upload-size-single-container-padding-horizontal,
-            file-upload-size-single-container-border-width]
-        );
-    min-height: var(--kbq-file-upload-single-min-height);
-
-    border-radius: var(--kbq-file-upload-size-single-container-border-radius);
-    border-width: var(--kbq-file-upload-size-single-container-border-width);
-    border-style: dashed;
-
-    & .kbq-file-dropzone__text {
-        padding-top: var(--kbq-file-upload-size-single-text-block-padding-vertical);
-
-        padding-bottom: var(--kbq-file-upload-size-single-text-block-padding-vertical);
-
-        gap: var(--kbq-file-upload-size-single-text-block-content-gap-horizontal);
+@mixin _kbq-single-file-upload-theme() {
+    background-color: var(--kbq-file-upload-single-default-container-background);
+    border-color: var(--kbq-file-upload-single-default-container-border) !important;
+
+    &:not(.kbq-disabled, .kbq-error) {
+        .kbq-file-upload__dropzone-icon {
+            color: var(--kbq-file-upload-single-default-dropzone-icon-color);
+        }
+
+        .kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
+            color: var(--kbq-file-upload-single-default-left-icon-color);
+        }
+
+        .kbq-file-item__size {
+            color: var(--kbq-file-upload-single-default-file-size-text-color);
+        }
     }
 
-    & .kbq-file-dropzone {
-        gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
+    &.kbq-file-drop_dragover {
+        background-color: var(--kbq-file-upload-single-states-on-drag-container-background);
+        border-color: var(--kbq-file-upload-single-states-on-drag-container-border) !important;
     }
 
-    .kbq-file-item {
-        width: 100%;
+    &.kbq-error:not(.kbq-disabled) {
+        &:not(.kbq-file-drop_dragover) {
+            background-color: var(--kbq-file-upload-single-states-error-container-background);
+            border-color: var(--kbq-file-upload-single-states-error-container-border) !important;
+        }
 
-        .kbq-file-item__text-wrapper {
-            display: flex;
-            align-items: center;
-            width: 100%;
+        .kbq-file-upload__dropzone-icon {
+            color: var(--kbq-file-upload-single-states-error-dropzone-icon-color);
+        }
 
-            gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
+        .kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
+            color: var(--kbq-file-upload-single-states-error-left-icon-color);
+        }
 
-            .kbq-file-item__text {
-                width: 120px;
-                flex-grow: 1;
-            }
+        .kbq-file-item__text,
+        .kbq-file-upload__dropzone-caption:not(.kbq-link) {
+            color: var(--kbq-file-upload-single-states-error-text-block-color);
+        }
+
+        .kbq-file-item__size {
+            color: var(--kbq-file-upload-single-states-error-file-size-text-color);
+        }
+    }
+
+    &.kbq-disabled {
+        background-color: var(--kbq-file-upload-single-states-disabled-container-background);
+        border-color: var(--kbq-file-upload-single-states-disabled-container-border) !important;
+
+        .kbq-file-upload__dropzone-icon {
+            color: var(--kbq-file-upload-single-states-disabled-dropzone-icon-color);
+        }
+
+        .kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
+            color: var(--kbq-file-upload-single-states-disabled-left-icon-color);
+        }
+
+        .kbq-file-upload__dropzone-caption,
+        .kbq-file-item__text {
+            color: var(--kbq-file-upload-single-states-disabled-text-block-color);
         }
 
         .kbq-file-item__size {
-            padding: 0 var(--kbq-size-s);
+            color: var(--kbq-file-upload-single-states-disabled-file-size-text-color);
+        }
+    }
+}
+
+.kbq-single-file-upload {
+    &.kbq-single-file-upload_selected .kbq-file-upload {
+        .kbq-file-item {
+            padding: kbq-difference-series-css-variables(
+                    [ file-upload-size-single-container-padding-vertical,
+                    file-upload-size-single-container-border-width]
+                )
+                kbq-difference-series-css-variables(
+                    [ file-upload-size-single-container-padding-horizontal,
+                    file-upload-size-single-container-border-width]
+                );
+            padding-right: 0;
+        }
+    }
+
+    &:not(.kbq-single-file-upload_selected) .kbq-file-upload {
+        padding: calc(
+                var(--kbq-file-upload-size-single-container-padding-vertical) - var(
+                        --kbq-file-upload-size-single-container-border-width
+                    )
+            )
+            calc(
+                var(--kbq-file-upload-size-single-container-padding-horizontal) - var(
+                        --kbq-file-upload-size-single-container-border-width
+                    )
+            );
+    }
+
+    .kbq-file-upload {
+        min-height: var(--kbq-file-upload-single-min-height);
+
+        border-radius: var(--kbq-file-upload-size-single-container-border-radius);
+        border-width: var(--kbq-file-upload-size-single-container-border-width);
+        border-style: dashed;
+
+        .kbq-file-item {
+            width: 100%;
+
+            .kbq-file-item__text-wrapper {
+                display: flex;
+                align-items: center;
+                width: 100%;
+
+                gap: var(--kbq-file-upload-size-single-container-content-gap-horizontal);
+
+                .kbq-file-item__text {
+                    width: 120px;
+                    flex-grow: 1;
+                }
+            }
+
+            .kbq-file-item__size {
+                padding: 0 var(--kbq-size-s);
+            }
         }
 
         .kbq-file-upload__action {
-            padding: var(--kbq-size-xxs);
+            padding: 13px;
         }
+
+        @include _kbq-single-file-upload-theme();
     }
 }

package/filter-bar/filter-bar-button.d.ts

@@ -1,9 +1,14 @@
+import { KbqFilters } from './filters';
 import * as i0 from "@angular/core";
 export declare class KbqFilterBarButton {
     private readonly button;
     /** KbqFilterBar instance */
     private readonly filterBar;
+    /** KbqFilters instance */
+    protected readonly filters: KbqFilters;
     constructor();
+    /** @docs-private */
+    saveFocusedElement(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFilterBarButton, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFilterBarButton, "[kbqFilterBarButton]", never, {}, {}, never, never, true, never>;
 }

package/filter-bar/filters.d.ts

@@ -1,12 +1,21 @@
-import { EventEmitter, OnInit } from '@angular/core';
+import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
+import { DestroyRef, ElementRef, EventEmitter, OnInit } from '@angular/core';
 import { FormControl, UntypedFormControl } from '@angular/forms';
-import { KbqButtonStyles } from '@koobiq/components/button';
+import { KbqButton, KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
+import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
+import { KbqPopoverTrigger } from '@koobiq/components/popover';
 import { Observable } from 'rxjs';
 import { KbqFilterBar } from './filter-bar';
 import { KbqFilter, KbqSaveFilterError, KbqSaveFilterEvent } from './filter-bar.types';
 import * as i0 from "@angular/core";
 export declare class KbqFilters implements OnInit {
+    /** @docs-private */
+    protected readonly elementRef: ElementRef<any>;
+    /** @docs-private */
+    protected readonly destroyRef: DestroyRef;
+    /** @docs-private */
+    protected readonly focusMonitor: FocusMonitor;
     /** @docs-private */
     protected readonly placements: typeof PopUpPlacements;
     /** @docs-private */
@@ -17,9 +26,18 @@ export declare class KbqFilters implements OnInit {
     protected readonly filterBar: KbqFilterBar;
     /** @docs-private */
     private readonly changeDetectorRef;
-    private button;
-    private popover;
-    private dropdown;
+    /** @docs-private */
+    protected mainButton: KbqButton;
+    /** @docs-private */
+    protected saveNewFilterButton: KbqButton;
+    /** @docs-private */
+    protected filterActionsButton: KbqButton;
+    /** @docs-private */
+    protected popover: KbqPopoverTrigger;
+    /** @docs-private */
+    protected dropdown: KbqDropdownTrigger;
+    /** @docs-private */
+    protected filterActionsDropdown: KbqDropdownTrigger;
     private search;
     private newFilterName;
     private saveFilterButton;
@@ -29,6 +47,8 @@ export declare class KbqFilters implements OnInit {
     filteredOptions: Observable<KbqFilter[]>;
     /** @docs-private */
     popoverSize: PopUpSizes;
+    /** @docs-private */
+    popoverOffset: number;
     /** new filter name for saving */
     filterName: FormControl<string | null>;
     /** true if saving a new filter, false if saving changes in filter */
@@ -54,6 +74,8 @@ export declare class KbqFilters implements OnInit {
     get popoverHeader(): string;
     /** Component state. true if opened dropdown or popup */
     get opened(): boolean;
+    /** Component state. true if opened dropdown or popup of filterActions */
+    get filterActionsOpened(): boolean;
     /** Selected filter */
     get filter(): KbqFilter | null;
     /** Component state. True if 'filters' input contains no elements. */
@@ -61,8 +83,15 @@ export declare class KbqFilters implements OnInit {
     /** localized data
      * @docs-private */
     get localeData(): any;
+    /** Current focus origin state.
+     * @docs-private */
+    get focusOrigin(): FocusOrigin;
+    private _focusOrigin;
+    private focusedElementBeforeOpen;
     constructor();
     ngOnInit(): void;
+    /** @docs-private */
+    focusedElementBeforeIs(button: KbqButton): boolean;
     selectFilter(filter: KbqFilter): void;
     saveChanges(): void;
     saveAsNew(event?: Event): void;
@@ -71,7 +100,9 @@ export declare class KbqFilters implements OnInit {
     preparePopover(): void;
     openSaveAsNewFilterPopover(): void;
     openChangeFilterNamePopover(): void;
-    closePopover: () => void;
+    /** @docs-private */
+    saveFocusedElement(button?: KbqButton): void;
+    closePopover: (restoreFocus?: boolean) => void;
     /** @docs-private */
     stopEventPropagation(event: Event): void;
     /** @docs-private */
@@ -79,6 +110,7 @@ export declare class KbqFilters implements OnInit {
     /** @docs-private */
     onDropdownOpen(): void;
     resetFilterChanges(): void;
+    removeFilter(): void;
     /** Hide the popup and restore focus.
      * Use this method in the onSave, onSaveAsNew, or onChangeFilter events after the data has been successfully saved. */
     filterSavedSuccessfully(): void;

package/filter-bar/pipes/pipe-multi-select.d.ts

@@ -28,6 +28,7 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     get selectedAllEqualsSelectedNothing(): boolean;
     private get visibleOptions();
     private selectionAllInProgress;
+    private internalSelected;
     /** @docs-private */
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -39,14 +40,16 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     toggleSelectionAllByEnterKey(): void;
     /** @docs-private */
     toggleSelectionAll(emitEvent?: boolean): void;
-    private emitChangePipeEvent;
     /** Comparator of selected options */
     compareByValue: (o1: any, o2: any) => boolean;
     /** handler for select all options in select */
     selectAllHandler: (event: KeyboardEvent) => void;
+    /** @docs-private */
     onClose(): void;
     /** opens select */
     open(): void;
+    private updateInternalSelected;
+    private emitChangePipeEvent;
     private getFilteredOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeMultiSelectComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeMultiSelectComponent, "kbq-pipe-multi-select", never, {}, {}, never, never, true, never>;

package/filter-bar/pipes/pipe-multi-tree-select.d.ts

@@ -31,6 +31,7 @@ export declare class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSele
     get selectedAllEqualsSelectedNothing(): boolean;
     /** true if all visible options selected */
     get allVisibleOptionsSelected(): boolean;
+    private internalSelected;
     constructor();
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -45,10 +46,14 @@ export declare class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSele
     updateTemplates: (templates: KbqPipeTemplate[] | null) => void;
     /** opens select */
     open(): void;
+    onClear(): void;
+    /** @docs-private */
     onOpen(): void;
+    /** @docs-private */
     onClose(): void;
     /** handler for select all options in select */
     selectAllHandler: (event: KeyboardEvent) => void;
+    private updateInternalSelected;
     private emitChangePipeEvent;
     private toggleParents;
     private transformer;

package/loader-overlay/loader-overlay.scss

@@ -14,6 +14,10 @@
 }
 
 .kbq-loader-overlay {
+    --padding-horizontal: var(--kbq-size-3xl);
+    --loader-margin-bottom: var(--kbq-size-xxl);
+    --content-gap-vertical: var(--kbq-size-l);
+
     position: absolute;
 
     display: flex;
@@ -41,46 +45,33 @@
         max-width: 80%;
     }
 
-    &.kbq-loader-overlay_big {
-        padding-left: var(--kbq-loader-overlay-size-big-overlay-padding-horizontal);
+    padding-left: var(--padding-horizontal);
+    padding-right: var(--padding-horizontal);
 
-        padding-right: var(--kbq-loader-overlay-size-big-overlay-padding-horizontal);
+    .kbq-progress-spinner:has(+ .kbq-loader-overlay-text, + .kbq-loader-overlay-caption) {
+        margin-bottom: var(--loader-margin-bottom);
+    }
 
-        .kbq-progress-spinner {
-            margin-bottom: var(--kbq-loader-overlay-size-big-loader-margin-bottom);
-        }
+    .kbq-loader-overlay-text {
+        margin-bottom: var(--content-gap-vertical);
+    }
 
-        .kbq-loader-overlay-text {
-            margin-bottom: var(--kbq-loader-overlay-size-big-content-content-gap-vertical);
-        }
+    &.kbq-loader-overlay_big {
+        --padding-horizontal: var(--kbq-loader-overlay-size-big-overlay-padding-horizontal);
+        --loader-margin-bottom: var(--kbq-loader-overlay-size-big-loader-margin-bottom);
+        --content-gap-vertical: var(--kbq-loader-overlay-size-big-content-content-gap-vertical);
     }
 
     &.kbq-loader-overlay_normal {
-        padding-left: var(--kbq-loader-overlay-size-normal-overlay-padding-horizontal);
-
-        padding-right: var(--kbq-loader-overlay-size-normal-overlay-padding-horizontal);
-
-        .kbq-progress-spinner {
-            margin-bottom: var(--kbq-loader-overlay-size-normal-loader-margin-bottom);
-        }
-
-        .kbq-loader-overlay-text {
-            margin-bottom: var(--kbq-loader-overlay-size-normal-content-content-gap-vertical);
-        }
+        --padding-horizontal: var(--kbq-loader-overlay-size-normal-overlay-padding-horizontal);
+        --loader-margin-bottom: var(--kbq-loader-overlay-size-normal-loader-margin-bottom);
+        --content-gap-vertical: var(--kbq-loader-overlay-size-normal-content-content-gap-vertical);
     }
 
     &.kbq-loader-overlay_compact {
-        padding-left: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
-
-        padding-right: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
-
-        .kbq-progress-spinner {
-            margin-bottom: var(--kbq-loader-overlay-size-compact-loader-margin-bottom);
-        }
-
-        .kbq-loader-overlay-text {
-            margin-bottom: var(--kbq-loader-overlay-size-compact-content-content-gap-vertical);
-        }
+        --padding-horizontal: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
+        --loader-margin-bottom: var(--kbq-loader-overlay-size-compact-loader-margin-bottom);
+        --content-gap-vertical: var(--kbq-loader-overlay-size-compact-content-content-gap-vertical);
     }
 }
 

package/modal/modal.scss

@@ -110,7 +110,7 @@
     padding: var(--kbq-modal-size-content-padding-top-without-header) var(--kbq-modal-size-content-padding-horizontal)
         var(--kbq-modal-size-content-padding-bottom) var(--kbq-modal-size-content-padding-horizontal);
 
-    word-wrap: break-word;
+    overflow-wrap: break-word;
 
     & > * {
         position: relative;

package/navbar/_navbar-item_vertical.scss

@@ -31,6 +31,14 @@
             top: var(--kbq-size-s);
             bottom: 0;
         }
+
+        & + .kbq-navbar-brand.kbq-vertical {
+            padding: var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-m);
+
+            &:after {
+                top: 0;
+            }
+        }
     }
 
     &.kbq-expanded {

package/navbar/navbar-brand.scss

@@ -54,10 +54,10 @@ a.kbq-navbar-brand {
     flex-direction: row;
     align-items: center;
 
-    padding: var(--kbq-size-xxs) var(--kbq-size-m) var(--kbq-size-m);
+    padding: var(--kbq-size-m);
 
     &:after {
-        top: 0;
+        top: var(--kbq-size-s);
         right: var(--kbq-size-s);
         bottom: var(--kbq-size-s);
         left: var(--kbq-size-s);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "19.0.0",
+    "version": "19.2.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,9 +24,9 @@
         "@angular/cdk": "^19.0.0",
         "@angular/core": "^19.0.0",
         "@angular/forms": "^19.0.0",
-        "@koobiq/cdk": "19.0.0",
-        "@koobiq/angular-moment-adapter": "19.0.0",
-        "@koobiq/angular-luxon-adapter": "19.0.0",
+        "@koobiq/cdk": "19.2.0",
+        "@koobiq/angular-moment-adapter": "19.2.0",
+        "@koobiq/angular-luxon-adapter": "19.2.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
         "@koobiq/tokens-builder": "3.11.0",
@@ -319,7 +319,7 @@
         }
     },
     "schematics": "./schematics/collection.json",
+    "sideEffects": false,
     "module": "fesm2022/koobiq-components.mjs",
-    "typings": "index.d.ts",
-    "sideEffects": false
+    "typings": "index.d.ts"
 }

package/popover/_popover-theme.scss

@@ -2,7 +2,7 @@
 
 @mixin kbq-popover-theme() {
     .kbq-popover {
-        box-shadow: var(--kbq-popover-borderless-shadow);
+        box-shadow: var(--kbq-popover-container-shadow);
 
         &.kbq-popover_arrowless {
             box-shadow: var(--kbq-popover-container-shadow);
@@ -14,7 +14,7 @@
     }
 
     .kbq-popover__arrow {
-        box-shadow: var(--kbq-popover-borderless-shadow);
+        box-shadow: var(--kbq-popover-container-shadow);
         background: var(--kbq-popover-container-background);
     }
 

package/popover/popover.component.d.ts

@@ -1,6 +1,6 @@
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import { CdkScrollable, Overlay, OverlayConfig, ScrollStrategy } from '@angular/cdk/overlay';
-import { AfterContentInit, AfterViewInit, ElementRef, EventEmitter, InjectionToken, OnInit, TemplateRef, Type } from '@angular/core';
+import { AfterContentInit, AfterViewInit, DestroyRef, ElementRef, EventEmitter, InjectionToken, OnInit, TemplateRef, Type } from '@angular/core';
 import { KbqComponentColors, KbqPopUp, KbqPopUpPlacementValues, KbqPopUpSizeValues, KbqPopUpTrigger, KbqStickToWindowPlacementValues } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare const defaultOffsetYWithArrow = 8;
@@ -94,6 +94,8 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     set closeOnScroll(value: boolean);
     private _closeOnScroll;
     get hasClickTrigger(): boolean;
+    /** @docs-private */
+    get instanceDestroyRef(): DestroyRef;
     backdropClass: string;
     arrow: boolean;
     offset: number | null;

package/progress-spinner/_progress-spinner-theme.scss

@@ -1,9 +1,19 @@
-@use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/tokens';
 
 @mixin kbq-progress-spinner-theme() {
     .kbq-progress-spinner {
+        --stroke: var(--kbq-progress-spinner-circle-background);
+
         .kbq-progress-spinner__circle {
-            stroke: var(--kbq-progress-spinner-circle-background);
+            stroke: var(--stroke);
+        }
+
+        &.kbq-contrast {
+            --stroke: var(--kbq-progress-spinner-circle-contrast-background);
+        }
+
+        &.kbq-contrast-fade {
+            --stroke: var(--kbq-progress-spinner-circle-contrast-fade-background);
         }
     }
 
@@ -18,10 +28,10 @@
 
 @mixin kbq-progress-spinner-typography() {
     .kbq-progress-spinner-text {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 
     .kbq-progress-spinner-caption {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
     }
 }

package/progress-spinner/progress-spinner-tokens.scss

@@ -9,6 +9,8 @@
     --kbq-progress-spinner-size-big-content-gap-horizontal: var(--kbq-size-s);
     /* THEME TOKENS */
     --kbq-progress-spinner-circle-background: var(--kbq-icon-theme);
+    --kbq-progress-spinner-circle-contrast-background: var(--kbq-icon-contrast);
+    --kbq-progress-spinner-circle-contrast-fade-background: var(--kbq-icon-contrast-fade);
     --kbq-progress-spinner-text-color: var(--kbq-foreground-contrast);
     --kbq-progress-spinner-caption-color: var(--kbq-foreground-contrast-secondary);
 }

package/progress-spinner/progress-spinner.scss

@@ -13,7 +13,7 @@
 .kbq-progress-spinner {
     display: flex;
     flex-direction: row;
-    overflow-y: hidden;
+    overflow: hidden;
 }
 
 .kbq-progress-spinner__circle {

package/risk-level/risk-level.component.d.ts

@@ -8,6 +8,9 @@ export declare enum KbqRiskLevelColors {
     Warning = "warning",
     Error = "error"
 }
+/**
+ * @deprecated Will be removed in next major release, use `KbqBadgeModule` instead.
+ */
 export declare class KbqRiskLevel {
     outline: boolean;
     get riskLevelColor(): string;

package/risk-level/risk-level.module.d.ts

@@ -2,6 +2,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/cdk/a11y";
 import * as i2 from "@angular/cdk/platform";
 import * as i3 from "./risk-level.component";
+/**
+ * @deprecated Will be removed in next major release, use `KbqBadgeModule` instead.
+ */
 export declare class KbqRiskLevelModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqRiskLevelModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<KbqRiskLevelModule, never, [typeof i1.A11yModule, typeof i2.PlatformModule, typeof i3.KbqRiskLevel], [typeof i3.KbqRiskLevel]>;

package/schematics/migrations/new-icons-pack/README.md

@@ -2,20 +2,68 @@
 
 This schematic provides migration for update icons pack. It includes:
 
-- Change prefixes from `mc` to `kbq` for ts, html, styles
+- Change prefixes from `mc` to `kbq` for TS, HTML, and styles
 - Update icon names for updated/removed icons according to [mapping](data.ts)
 - Fix icons package prefix in styles
+- Optionally use custom migration and replacement data
 
-[Params](schema.ts)
+---
 
-Usage for Angular Cli:
+### Parameters
+
+The schematic supports the following options:
+
+- **`--fix`** (`boolean`)
+  Applies fixes automatically without prompting.
+
+- **`--project`** (`string`)
+  Target Angular/Nx project name.
+
+- **`--update-prefix`** (`boolean`)
+  Whether to change icon prefixes during migration.
+
+- **`--custom-data-path`** (`string`)
+  Path to a custom migration data file.
+  When provided, use `migration.json` file as a default.
+  Use this option if you want to override the default icon mapping data.
+
+- **`--custom-icon-replacement-path`** (`string`)
+  Path to a custom icon attributes replacement file.
+  When provided, use `replacement.json` file as a default.
+  Use this option to customize how icon attributes are replaced during migration.
+
+The schema definition can be found in [`schema.ts`](schema.ts).
+
+### Usage
+
+#### Angular CLI
 
 ```shell
 ng g @koobiq/components:new-icons-pack --fix=true --project <your project>
 ```
 
-Usage for Nx:
+#### Angular CLI with custom data
+
+```shell
+ng g @koobiq/components:new-icons-pack \
+  --custom-data-path migration.json \
+  --custom-icon-replacement-path replacement.json \
+  --fix=true \
+  --project <your-project>
+```
+
+#### Nx
 
 ```shell
 nx g @koobiq/components:new-icons-pack --fix=true --project <your project>
 ```
+
+#### Nx with custom data
+
+```shell
+nx g @koobiq/components:new-icons-pack \
+--custom-data-path migration.json \
+--custom-icon-replacement-path replacement.json \
+--fix=true \
+--project <your-project>
+```