@koobiq/components 18.28.0 → 18.29.0

package/file-upload/_file-upload-theme.scss

@@ -16,6 +16,20 @@
             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__action {
+                    color: var(--kbq-file-upload-single-default-icon-button-color);
+                }
+
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-single-default-upload-icon-color);
+                }
+
+                .file-item__text-wrapper .kbq-icon.kbq-empty {
+                    color: var(--kbq-file-upload-single-default-left-icon-color);
+                }
+            }
+
             &.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;
@@ -27,20 +41,43 @@
                     border-color: var(--kbq-file-upload-single-states-error-container-border) !important;
                 }
 
-                :not(.kbq-link),
-                .kbq-icon.kbq-empty {
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-single-states-error-upload-icon-color);
+                }
+
+                .file-item__text-wrapper .kbq-icon.kbq-empty {
+                    color: var(--kbq-file-upload-single-states-error-left-icon-color);
+                }
+
+                .file-item__text,
+                .dropzone__text:not(.kbq-link) {
                     color: var(--kbq-file-upload-single-states-error-text-block-color);
                 }
+
+                .kbq-file-upload__action {
+                    color: var(--kbq-file-upload-single-states-error-icon-button-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-icon.kbq-empty,
-                .kbq-link {
-                    color: var(--kbq-file-upload-single-states-disabled-container-border);
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-single-states-disabled-upload-icon-color);
+                }
+
+                .file-item__text-wrapper .kbq-icon.kbq-empty {
+                    color: var(--kbq-file-upload-single-states-disabled-left-icon-color);
+                }
+
+                .dropzone__text,
+                .file-item__text {
+                    color: var(--kbq-file-upload-single-states-disabled-text-block-color);
+                }
+
+                .kbq-file-upload__action {
+                    color: var(--kbq-file-upload-single-states-disabled-icon-button-color);
                 }
             }
         }
@@ -59,6 +96,12 @@
                 border-bottom-color: var(--kbq-file-upload-multiple-default-grid-divider-color);
             }
 
+            &:not(.kbq-disabled, .kbq-error) {
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-multiple-default-upload-icon-color);
+                }
+            }
+
             &.dragover {
                 background-color: var(--kbq-file-upload-multiple-states-on-drag-container-background);
                 border-color: var(--kbq-file-upload-multiple-states-on-drag-container-border) !important;
@@ -67,6 +110,10 @@
                     border-bottom-color: var(--kbq-file-upload-multiple-states-on-drag-container-background) !important;
                 }
 
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color);
+                }
+
                 &.selected {
                     .dropzone {
                         border-top-color: var(--kbq-file-upload-multiple-states-on-drag-container-border);
@@ -78,10 +125,28 @@
                 background-color: var(--kbq-file-upload-multiple-states-disabled-container-background);
                 border-color: var(--kbq-file-upload-multiple-states-disabled-container-border) !important;
 
-                &,
-                .kbq-icon.kbq-empty,
-                .kbq-link {
-                    color: var(--kbq-file-upload-multiple-states-disabled-container-border);
+                .kbq-dropzone__icon {
+                    color: var(--kbq-file-upload-multiple-states-disabled-upload-icon-color);
+                }
+
+                .dropzone__text,
+                .kbq-file-multiple-uploaded__header {
+                    color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
+                }
+
+                .multiple__uploaded-item {
+                    .kbq-file-upload__file .kbq-icon.kbq-empty {
+                        color: var(--kbq-file-upload-multiple-states-disabled-left-icon-color);
+                    }
+
+                    .file-item__text,
+                    .kbq-file-upload__size {
+                        color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
+                    }
+
+                    .kbq-file-upload__action .kbq-icon.kbq-empty {
+                        color: var(--kbq-file-upload-multiple-states-disabled-icon-button-color);
+                    }
                 }
 
                 &.selected {
@@ -96,9 +161,13 @@
                     background-color: var(--kbq-background-error-less);
                     border-color: var(--kbq-line-error) !important;
 
-                    :not(.kbq-link),
-                    .kbq-icon.kbq-empty {
-                        color: var(--kbq-foreground-error);
+                    .kbq-dropzone__icon {
+                        color: var(--kbq-file-upload-single-states-error-upload-icon-color);
+                    }
+
+                    .dropzone__text:not(.kbq-link),
+                    .kbq-file-multiple-uploaded__header {
+                        color: var(--kbq-file-upload-single-states-error-text-block-color);
                     }
                 }
 
@@ -106,20 +175,28 @@
                     &:has(.kbq-file-upload__row.error) {
                         background-color: var(--kbq-background-error-less);
 
-                        :not(.kbq-link),
-                        .kbq-icon.kbq-empty {
+                        .file-item__text,
+                        .kbq-file-upload__size {
                             color: var(--kbq-foreground-error);
                         }
+
+                        .kbq-file-upload__file .kbq-icon.kbq-empty {
+                            color: var(--kbq-file-upload-multiple-states-error-left-icon-color);
+                        }
+
+                        .kbq-file-upload__action .kbq-icon.kbq-empty {
+                            color: var(--kbq-file-upload-multiple-states-error-icon-button-color);
+                        }
                     }
                 }
             }
 
             .multiple__uploaded-item {
-                & .kbq-file-upload__file .kbq-icon.kbq-empty {
+                .kbq-file-upload__file .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-multiple-default-left-icon-color);
                 }
 
-                & .kbq-file-upload__action .kbq-icon.kbq-empty {
+                .kbq-file-upload__action .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-multiple-default-icon-button-color);
                 }
             }

package/file-upload/file-upload-tokens.scss

@@ -6,6 +6,7 @@
     --kbq-file-upload-size-single-container-padding-horizontal: var(--kbq-size-m);
     --kbq-file-upload-size-single-text-block-padding-vertical: var(--kbq-size-3xs);
     --kbq-file-upload-size-single-text-block-content-gap-horizontal: var(--kbq-size-xxs);
+    --kbq-file-upload-single-min-height: var(--kbq-size-5xl);
     --kbq-file-upload-size-multiple-big-container-min-height: 160px;
     --kbq-file-upload-size-multiple-big-container-min-width: 320px;
     --kbq-file-upload-size-multiple-big-container-border-radius: var(--kbq-size-s);
@@ -32,12 +33,15 @@
     --kbq-file-upload-single-states-on-drag-text-block-color: var(--kbq-foreground-contrast);
     --kbq-file-upload-single-states-error-container-border: var(--kbq-line-error);
     --kbq-file-upload-single-states-error-container-background: var(--kbq-background-error-less);
+    --kbq-file-upload-single-states-error-upload-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-single-states-error-left-icon-color: var(--kbq-icon-error);
     --kbq-file-upload-single-states-error-text-block-color: var(--kbq-foreground-error);
+    --kbq-file-upload-single-states-error-icon-button-color: var(--kbq-icon-error);
     --kbq-file-upload-single-states-disabled-container-border: var(--kbq-states-line-disabled);
     --kbq-file-upload-single-states-disabled-container-background: var(--kbq-states-background-disabled);
     --kbq-file-upload-single-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-single-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
+    --kbq-file-upload-single-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-single-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
     --kbq-file-upload-single-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
     --kbq-file-upload-multiple-default-container-border: var(--kbq-line-contrast-fade);
@@ -62,6 +66,7 @@
     --kbq-file-upload-multiple-states-disabled-container-background: var(--kbq-states-background-disabled);
     --kbq-file-upload-multiple-states-disabled-upload-icon-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-multiple-states-disabled-left-icon-color: var(--kbq-states-icon-disabled);
+    --kbq-file-upload-multiple-states-disabled-icon-button-color: var(--kbq-states-icon-disabled);
     --kbq-file-upload-multiple-states-disabled-text-block-color: var(--kbq-states-foreground-disabled);
     --kbq-file-upload-multiple-states-disabled-grid-divider-color: var(--kbq-states-line-disabled);
     --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);

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

@@ -11,6 +11,7 @@
             [ 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);

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

@@ -55,7 +55,9 @@ export declare enum KbqPipeTypes {
     ReadOnly = "readonly",
     Text = "text",
     Select = "select",
+    TreeSelect = "tree-select",
     MultiSelect = "multiselect",
+    MultiTreeSelect = "multi-tree-select",
     Date = "date",
     Datetime = "datetime"
 }
@@ -105,7 +107,32 @@ export interface KbqSaveFilterError {
     text?: string;
     nameAlreadyExists?: boolean;
 }
+/** saving statuses for KbqSaveFilterEvent */
+export declare enum KbqSaveFilterStatuses {
+    OnlyChanges = "onlyChanges",
+    NewName = "newName",
+    NewFilter = "newFilter"
+}
 export interface KbqSaveFilterEvent {
-    filter: KbqFilter | null;
+    filter: KbqFilter;
     filterBar: KbqFilterBar;
+    status?: KbqSaveFilterStatuses;
+}
+/** Flattened node */
+export declare class KbqTreeSelectFlatNode {
+    name: string;
+    value: unknown;
+    level: number;
+    expandable: boolean;
+    parent?: KbqTreeSelectFlatNode;
+}
+export interface KbqTreeSelectNode {
+    children: KbqTreeSelectNode[] | null;
+    name: string;
+    value: unknown;
 }
+/**
+ * Build the file structure tree. The `value` is the Json object, or a sub-tree of a Json object.
+ * The return value is the list of extends `KbqTreeSelectNode`.
+ */
+export declare function kbqBuildTree<T extends KbqTreeSelectNode>(value: any, level: number): T[];

package/filter-bar/filters.d.ts

@@ -41,7 +41,8 @@ export declare class KbqFilters implements OnInit {
     readonly onSave: EventEmitter<KbqSaveFilterEvent>;
     /** Event that is generated whenever the user change a filter. */
     readonly onChangeFilter: EventEmitter<KbqSaveFilterEvent>;
-    /** Event that is generated whenever the user saves a filter as new. */
+    /** Event that is generated whenever the user saves a filter as new.
+     * @deprecated use onSave with status = newFilter. */
     readonly onSaveAsNew: EventEmitter<KbqSaveFilterEvent>;
     /** Event that is generated whenever the user remove a filter. */
     readonly onRemoveFilter: EventEmitter<KbqFilter>;
@@ -62,7 +63,7 @@ export declare class KbqFilters implements OnInit {
     ngOnInit(): void;
     selectFilter(filter: KbqFilter): void;
     saveChanges(): void;
-    saveAsNew(): void;
+    saveAsNew(event?: Event): void;
     showError(error?: KbqSaveFilterError): void;
     restoreFocus(): void;
     preparePopover(): void;

package/filter-bar/filters.scss

@@ -18,6 +18,10 @@
 
     & .kbq-filters__filter-name {
         @include common.kbq-truncate-line();
+
+        & .kbq-icon {
+            margin-bottom: var(--kbq-size-3xs);
+        }
     }
 
     & .kbq-filter-bar__separator {

package/filter-bar/pipes/base-pipe.scss

@@ -47,6 +47,7 @@
     }
 
     .kbq-select:not(:hover, .kbq-active),
+    .kbq-tree-select:not(:hover, .kbq-active),
     .kbq-button:not(:hover, .kbq-active, [disabled]) {
         & + .kbq-pipe-button:not(:hover, .kbq-active)::after {
             content: '';

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

@@ -21,8 +21,12 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     get isEmpty(): boolean;
     /** state for checkbox 'select all'. */
     get checkboxState(): KbqPseudoCheckboxState;
+    /** true if all visible options selected */
+    get allVisibleOptionsSelected(): boolean;
+    /** true if all options selected */
+    get allOptionsSelected(): boolean;
     private get visibleOptions();
-    private get allOptionsSelected();
+    private selectionAllInProgress;
     /** @docs-private */
     ngOnInit(): void;
     /** @docs-private */
@@ -37,6 +41,7 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     toggleSelectionAll(): void;
     /** Comparator of selected options */
     compareByValue: (o1: any, o2: any) => boolean;
+    onClose(): void;
     /** opens select */
     open(): void;
     private getFilteredOptions;

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

@@ -0,0 +1,57 @@
+import { OnInit } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
+import { KbqPseudoCheckboxState } from '@koobiq/components/core';
+import { FlatTreeControl, KbqTreeFlatDataSource, KbqTreeFlattener, KbqTreeSelection } from '@koobiq/components/tree';
+import { KbqTreeSelect } from '@koobiq/components/tree-select';
+import { Observable } from 'rxjs';
+import { KbqPipeTemplate, KbqSelectValue, KbqTreeSelectFlatNode, KbqTreeSelectNode } from '../filter-bar.types';
+import { KbqBasePipe } from './base-pipe';
+import * as i0 from "@angular/core";
+export declare class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSelectValue[]> implements OnInit {
+    /** control for search options */
+    searchControl: UntypedFormControl;
+    /** filtered by search options */
+    filteredOptions: Observable<any[]>;
+    treeControl: FlatTreeControl<KbqTreeSelectFlatNode>;
+    treeFlattener: KbqTreeFlattener<KbqTreeSelectNode, KbqTreeSelectFlatNode>;
+    dataSource: KbqTreeFlatDataSource<KbqTreeSelectNode, KbqTreeSelectFlatNode>;
+    template: any;
+    /** @docs-private */
+    select: KbqTreeSelect;
+    /** @docs-private */
+    tree: KbqTreeSelection;
+    /** selected value */
+    get selected(): KbqSelectValue[] | null;
+    /** Whether the current pipe is empty. */
+    get isEmpty(): boolean;
+    get selectAllCheckboxState(): KbqPseudoCheckboxState;
+    get numberOfSelectedLeaves(): number;
+    /** true if all options selected */
+    get allOptionsSelected(): boolean;
+    /** true if all visible options selected */
+    get allVisibleOptionsSelected(): boolean;
+    constructor();
+    ngOnInit(): void;
+    isNodeHasChild(_: number, nodeData: any): any;
+    isNodeSelectAll(_: number, nodeData: any): boolean;
+    onSelect({ value: option }: {
+        value: any;
+    }): void;
+    searchKeydownHandler(): void;
+    toggleSelectAllNode(): void;
+    /** updates values for selection and value template */
+    updateTemplates: (templates: KbqPipeTemplate[] | null) => void;
+    /** opens select */
+    open(): void;
+    onOpen(): void;
+    onClose(): void;
+    private toggleParents;
+    private transformer;
+    private getLevel;
+    private isExpandable;
+    private getChildren;
+    private getValue;
+    private getViewValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeMultiTreeSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeMultiTreeSelectComponent, "kbq-pipe-multi-tree-select", never, {}, {}, never, never, true, never>;
+}

package/filter-bar/pipes/pipe-multi-tree-select.scss

@@ -0,0 +1,19 @@
+.kbq-pipe__multi-tree-select {
+    .kbq-pipe__value {
+        margin-left: var(--kbq-size-xxs);
+    }
+
+    .kbq-badge {
+        align-self: center;
+
+        margin-left: var(--kbq-size-xs);
+    }
+
+    & .kbq-tree-select .kbq-select__trigger {
+        height: unset;
+    }
+}
+
+.kbq-pipe-multi-tree-select__panel .kbq-select__content {
+    max-height: 404px;
+}

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

@@ -0,0 +1,41 @@
+import { OnInit } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
+import { FlatTreeControl, KbqTreeFlatDataSource, KbqTreeFlattener, KbqTreeOption } from '@koobiq/components/tree';
+import { KbqTreeSelect } from '@koobiq/components/tree-select';
+import { Observable } from 'rxjs';
+import { KbqPipeTemplate, KbqSelectValue, KbqTreeSelectFlatNode, KbqTreeSelectNode } from '../filter-bar.types';
+import { KbqBasePipe } from './base-pipe';
+import * as i0 from "@angular/core";
+export declare class KbqPipeTreeSelectComponent extends KbqBasePipe<KbqSelectValue> implements OnInit {
+    /** control for search options */
+    searchControl: UntypedFormControl;
+    /** filtered by search options */
+    filteredOptions: Observable<any[]>;
+    treeControl: FlatTreeControl<KbqTreeSelectFlatNode>;
+    treeFlattener: KbqTreeFlattener<KbqTreeSelectNode, KbqTreeSelectFlatNode>;
+    dataSource: KbqTreeFlatDataSource<KbqTreeSelectNode, KbqTreeSelectFlatNode>;
+    template: any;
+    /** @docs-private */
+    select: KbqTreeSelect;
+    /** selected value */
+    get selected(): KbqSelectValue | null;
+    /** Whether the current pipe is empty. */
+    get isEmpty(): boolean;
+    constructor();
+    ngOnInit(): void;
+    hasChild(_: number, nodeData: any): any;
+    onSelect(item: KbqTreeOption): void;
+    /** updates values for selection and value template */
+    updateTemplates: (templates: KbqPipeTemplate[] | null) => void;
+    /** opens select */
+    open(): void;
+    onOpen(): void;
+    private transformer;
+    private getLevel;
+    private isExpandable;
+    private getChildren;
+    private getValue;
+    private getViewValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeTreeSelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeTreeSelectComponent, "kbq-pipe-tree-select", never, {}, {}, never, never, true, never>;
+}

package/filter-bar/pipes/pipe-tree-select.scss

@@ -0,0 +1,9 @@
+.kbq-pipe-tree-select__panel .kbq-tree-select__content {
+    max-height: 404px;
+}
+
+.kbq-pipe__tree-select {
+    .kbq-select__trigger {
+        height: unset;
+    }
+}

package/filter-bar/public-api.d.ts

@@ -18,3 +18,4 @@ export * from './pipes/pipe-select';
 export * from './pipes/pipe-state';
 export * from './pipes/pipe-text';
 export * from './pipes/pipe-title';
+export * from './pipes/pipe-tree-select';

package/form-field/_form-field-theme.scss

@@ -82,18 +82,18 @@
                 -webkit-text-fill-color: var(--kbq-form-field-states-disabled-text);
             }
         }
-    }
 
-    .kbq-form-field__prefix,
-    .kbq-form-field__suffix {
-        .kbq-icon.kbq-empty {
-            color: var(--kbq-icon-contrast-fade);
+        .kbq-form-field__prefix,
+        .kbq-form-field__suffix {
+            .kbq-icon.kbq-empty {
+                color: var(--kbq-icon-contrast-fade);
+            }
         }
-    }
 
-    .kbq-form-field__hint {
-        & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
-            color: var(--kbq-form-field-hint-text);
+        .kbq-form-field__hint {
+            & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
+                color: var(--kbq-form-field-hint-text);
+            }
         }
     }
 }
@@ -101,9 +101,9 @@
 @mixin kbq-form-field-typography() {
     .kbq-form-field {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
-    }
 
-    .kbq-form-field__hint > .kbq-hint:not(.kbq-password-hint) .kbq-hint__text {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        .kbq-form-field__hint > .kbq-hint:not(.kbq-password-hint) .kbq-hint__text {
+            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        }
     }
 }

package/form-field/form-field.scss

@@ -13,6 +13,11 @@
 
     .kbq-form-field__container {
         box-sizing: border-box;
+        position: relative;
+        border-width: var(--kbq-form-field-size-border-width);
+        border-style: solid;
+        border-color: transparent;
+        border-radius: var(--kbq-form-field-size-border-radius);
     }
 
     .kbq-form-field:not(.kbq-form-field-type-textarea) {
@@ -61,82 +66,74 @@
     & + .kbq-password-hint {
         margin-top: var(--kbq-size-m);
     }
-}
-
-.kbq-form-field__container {
-    position: relative;
-    border-width: var(--kbq-form-field-size-border-width);
-    border-style: solid;
-    border-color: transparent;
-    border-radius: var(--kbq-form-field-size-border-radius);
-}
 
-.kbq-form-field__prefix,
-.kbq-form-field__suffix {
-    position: absolute;
-    top: 0;
-    bottom: 0;
+    .kbq-form-field__prefix,
+    .kbq-form-field__suffix {
+        position: absolute;
+        top: 0;
+        bottom: 0;
 
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-}
-
-.kbq-form-field__prefix {
-    left: 0;
-    padding-left: var(--kbq-size-m);
-    padding-right: var(--kbq-size-s);
-}
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
 
-.kbq-form-field__suffix {
-    right: 0;
-    padding-right: var(--kbq-size-m);
-    padding-left: var(--kbq-size-s);
-}
+    .kbq-form-field__prefix {
+        left: 0;
+        padding-left: var(--kbq-size-m);
+        padding-right: var(--kbq-size-s);
+    }
 
-.kbq-form-field__cleaner,
-.kbq-password-toggle,
-.kbq-stepper {
-    position: absolute;
+    .kbq-form-field__suffix {
+        right: 0;
+        padding-right: var(--kbq-size-m);
+        padding-left: var(--kbq-size-s);
+    }
 
-    top: 0;
-    bottom: 0;
-    right: 0;
-}
+    .kbq-form-field__cleaner,
+    .kbq-password-toggle,
+    .kbq-stepper {
+        position: absolute;
 
-.kbq-stepper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+        top: 0;
+        bottom: 0;
+        right: 0;
+    }
 
-    width: var(--kbq-form-field-size-icon-button-size);
+    .kbq-stepper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
 
-    .kbq-stepper-step-up,
-    .kbq-stepper-step-down {
-        cursor: pointer;
         width: var(--kbq-form-field-size-icon-button-size);
-        text-align: center;
-    }
 
-    .kbq-stepper-step-up {
-        transform: scaleY(-1);
+        .kbq-stepper-step-up,
+        .kbq-stepper-step-down {
+            cursor: pointer;
+            width: var(--kbq-form-field-size-icon-button-size);
+            text-align: center;
+        }
+
+        .kbq-stepper-step-up {
+            transform: scaleY(-1);
+        }
     }
-}
 
-.kbq-form-field__hint {
-    display: flex;
-    flex-direction: column;
-    margin-top: var(--kbq-form-field-hint-size-margin-top);
+    .kbq-form-field__hint {
+        display: flex;
+        flex-direction: column;
+        margin-top: var(--kbq-form-field-hint-size-margin-top);
 
-    & .kbq-password-hint:first-child {
-        margin-top: var(--kbq-size-s);
+        & .kbq-password-hint:first-child {
+            margin-top: var(--kbq-size-s);
+        }
     }
-}
 
-.kbq-password-hint {
-    margin-top: var(--kbq-form-field-hint-size-gap);
+    .kbq-password-hint {
+        margin-top: var(--kbq-form-field-hint-size-gap);
+    }
 }
 
 @include kbq-form-field-theme();

package/input/_input-theme.scss

@@ -8,5 +8,11 @@
 
     .kbq-input.kbq-input-password {
         @include kbq-typography-level-to-styles-css-variables(typography, mono-normal);
+        // disable font-specific symbols replacements
+        font-variant-ligatures: none;
+        font-feature-settings:
+            'liga' 0,
+            'clig' 0,
+            'calt' 0;
     }
 }

package/input/input-number.d.ts

@@ -8,6 +8,7 @@ export declare const KBQ_INPUT_NUMBER_DEFAULT_CONFIGURATION: {
     groupSeparator: string[];
     fractionSeparator: string;
     startFormattingFrom: number;
+    viewGroupSeparator: string;
 };
 export declare const BIG_STEP = 10;
 export declare const SMALL_STEP = 1;