@koobiq/components 18.26.0 → 18.28.0

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

@@ -1,3 +1,5 @@
+// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
+/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens';
 
 @mixin kbq-file-upload-theme() {
@@ -26,7 +28,7 @@
                 }
 
                 :not(.kbq-link),
-                .kbq-icon {
+                .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-single-states-error-text-block-color);
                 }
             }
@@ -36,7 +38,7 @@
                 border-color: var(--kbq-file-upload-single-states-disabled-container-border) !important;
 
                 &,
-                .kbq-icon,
+                .kbq-icon.kbq-empty,
                 .kbq-link {
                     color: var(--kbq-file-upload-single-states-disabled-container-border);
                 }
@@ -77,7 +79,7 @@
                 border-color: var(--kbq-file-upload-multiple-states-disabled-container-border) !important;
 
                 &,
-                .kbq-icon,
+                .kbq-icon.kbq-empty,
                 .kbq-link {
                     color: var(--kbq-file-upload-multiple-states-disabled-container-border);
                 }
@@ -95,7 +97,7 @@
                     border-color: var(--kbq-line-error) !important;
 
                     :not(.kbq-link),
-                    .kbq-icon {
+                    .kbq-icon.kbq-empty {
                         color: var(--kbq-foreground-error);
                     }
                 }
@@ -105,7 +107,7 @@
                         background-color: var(--kbq-background-error-less);
 
                         :not(.kbq-link),
-                        .kbq-icon {
+                        .kbq-icon.kbq-empty {
                             color: var(--kbq-foreground-error);
                         }
                     }
@@ -113,11 +115,11 @@
             }
 
             .multiple__uploaded-item {
-                & .kbq-file-upload__file .kbq-icon {
+                & .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-file-upload__action .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-multiple-default-icon-button-color);
                 }
             }

package/file-upload/file-upload.scss

@@ -1,3 +1,6 @@
+// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
+/* stylelint-disable selector-class-pattern */
+
 @use './file-upload-theme' as theme;
 
 .kbq-file-upload {

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

@@ -1,3 +1,5 @@
+// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
+/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens' as *;
 
 // todo нужно рефакторить со стилями тут сложно

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

@@ -1,3 +1,5 @@
+// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
+/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens' as *;
 
 .kbq-single-file-upload .kbq-file-upload {

package/filter-bar/_filter-bar-theme.scss

@@ -7,7 +7,7 @@
 }
 
 @mixin _icon($left-icon, $right-icon) {
-    .kbq-icon {
+    .kbq-icon.kbq-empty {
         color: $left-icon;
 
         &.kbq-icon_left {

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

@@ -20,8 +20,8 @@ export declare class KbqFilterBar {
     set filter(value: KbqFilter | null);
     private _filter;
     /** An array of templates that are used when adding a pipe. Also contains lists of options to select (values). */
-    set pipeTemplates(value: KbqPipeTemplate[]);
     get pipeTemplates(): KbqPipeTemplate[];
+    set pipeTemplates(value: KbqPipeTemplate[]);
     private _templates;
     /**
      * Event that emits whenever the raw value of the filter changes. This is here primarily
@@ -33,6 +33,8 @@ export declare class KbqFilterBar {
     readonly onChangePipe: EventEmitter<KbqPipe>;
     /** Event that emits whenever the pipe deleted. */
     readonly onRemovePipe: EventEmitter<KbqPipe>;
+    /** Event that emits whenever the select or multiselect pipe closed. */
+    readonly onClosePipe: EventEmitter<KbqPipe>;
     /** Whether the current filter is saved and changed */
     get isSavedAndChanged(): boolean;
     /** Whether the current filter is saved */
@@ -65,5 +67,5 @@ export declare class KbqFilterBar {
     private updateLocaleParams;
     private initDefaultParams;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFilterBar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFilterBar, "kbq-filter-bar, [kbq-filter-bar]", never, { "filter": { "alias": "filter"; "required": false; }; "pipeTemplates": { "alias": "pipeTemplates"; "required": false; }; }, { "filterChange": "filterChange"; "onChangePipe": "onChangePipe"; "onRemovePipe": "onRemovePipe"; }, ["filters", "filterReset"], ["kbq-filters", "*", "kbq-pipe-add", "kbq-filter-reset", "kbq-filter-search, [kbq-filter-search]", "kbq-filter-refresher, [kbq-filter-refresher]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFilterBar, "kbq-filter-bar, [kbq-filter-bar]", never, { "filter": { "alias": "filter"; "required": false; }; "pipeTemplates": { "alias": "pipeTemplates"; "required": false; }; }, { "filterChange": "filterChange"; "onChangePipe": "onChangePipe"; "onRemovePipe": "onRemovePipe"; "onClosePipe": "onClosePipe"; }, ["filters", "filterReset"], ["kbq-filters", "*", "kbq-pipe-add", "kbq-filter-reset", "kbq-filter-search, [kbq-filter-search]", "kbq-filter-refresher, [kbq-filter-refresher]"], true, never>;
 }

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

@@ -34,6 +34,7 @@ export declare const KBQ_FILTER_BAR_DEFAULT_CONFIGURATION: {
         removeButtonTooltip: string;
         applyButton: string;
         emptySearchResult: string;
+        selectAll: string;
     };
     datePipe: {
         customPeriod: string;
@@ -51,6 +52,7 @@ export declare const KBQ_FILTER_BAR_PIPES: InjectionToken<any>;
 export declare const kbqFilterBarPipesProvider: () => Provider;
 /** list of pipe types available out of the box */
 export declare enum KbqPipeTypes {
+    ReadOnly = "readonly",
     Text = "text",
     Select = "select",
     MultiSelect = "multiselect",
@@ -83,7 +85,9 @@ export interface KbqPipe {
     type: KbqPipeType;
     value: unknown | null;
     search?: boolean;
-    required: boolean;
+    selectAll?: boolean;
+    /** @deprecated use cleanable = false and removable = false instead */
+    required?: boolean;
     cleanable: boolean;
     removable: boolean;
     disabled: boolean;

package/filter-bar/pipes/base-pipe.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectorRef, ElementRef, InjectionToken, TemplateRef } from '@angular/core';
+import { AfterViewInit, ChangeDetectorRef, DestroyRef, ElementRef, InjectionToken, TemplateRef } from '@angular/core';
 import { Subject } from 'rxjs';
 import { KbqFilterBar } from '../filter-bar';
 import { KbqPipeData, KbqPipeTemplate, KbqPipeType } from '../filter-bar.types';
@@ -17,6 +17,8 @@ export declare abstract class KbqBasePipe<V> implements AfterViewInit {
     protected readonly filterBar: KbqFilterBar | null;
     /** @docs-private */
     protected readonly changeDetectorRef: ChangeDetectorRef;
+    /** @docs-private */
+    protected readonly destroyRef: DestroyRef;
     /** values to select from the pipe template */
     protected values: any;
     /** TemplateRef for selecting an option */

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

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

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

@@ -9,10 +9,13 @@ export declare class KbqPipeButton {
     protected readonly filterBar: KbqFilterBar;
     /** @docs-private */
     protected readonly changeDetectorRef: ChangeDetectorRef;
+    /** enables/disables read-only state */
+    readonly: boolean;
     /** localized data
      * @docs-private */
     get localeData(): any;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeButton, "kbq-pipe-button", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeButton, "kbq-pipe-button", never, { "readonly": { "alias": "readonly"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_readonly: unknown;
 }

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

@@ -1,24 +1,40 @@
-import { OnInit } from '@angular/core';
+import { AfterViewInit, OnInit, QueryList } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
+import { KbqOption, KbqPseudoCheckboxState } from '@koobiq/components/core';
 import { KbqSelect } from '@koobiq/components/select';
 import { Observable } from 'rxjs';
 import { KbqSelectValue } from '../filter-bar.types';
 import { KbqBasePipe } from './base-pipe';
 import * as i0 from "@angular/core";
-export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> implements OnInit {
+export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> implements AfterViewInit, OnInit {
     /** control for search options */
     searchControl: UntypedFormControl;
     /** filtered by search options */
     filteredOptions: Observable<any[]>;
     /** @docs-private */
     select: KbqSelect;
+    /** @docs-private */
+    options: QueryList<KbqOption>;
     /** selected value */
     get selected(): KbqSelectValue[] | null;
     /** Whether the current pipe is empty. */
     get isEmpty(): boolean;
+    /** state for checkbox 'select all'. */
+    get checkboxState(): KbqPseudoCheckboxState;
+    private get visibleOptions();
+    private get allOptionsSelected();
+    /** @docs-private */
     ngOnInit(): void;
+    /** @docs-private */
+    ngAfterViewInit(): void;
+    /** @docs-private */
     onSelect(item: KbqSelectValue[]): void;
+    /** @docs-private */
     onClear(): void;
+    /** @docs-private */
+    toggleSelectionAllByEnterKey(): void;
+    /** @docs-private */
+    toggleSelectionAll(): void;
     /** Comparator of selected options */
     compareByValue: (o1: any, o2: any) => boolean;
     /** opens select */

package/filter-bar/pipes/pipe-readonly.d.ts

@@ -0,0 +1,7 @@
+import { KbqBasePipe } from './base-pipe';
+import * as i0 from "@angular/core";
+export declare class KbqPipeReadonlyComponent extends KbqBasePipe<string | null> {
+    open(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeReadonlyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeReadonlyComponent, "kbq-pipe-readonly", never, {}, {}, never, never, true, never>;
+}

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

@@ -0,0 +1,18 @@
+.kbq-pipe.kbq-pipe__readonly {
+    & .kbq-button {
+        cursor: default;
+    }
+
+    &:not(.kbq-pipe_cleanable) {
+        & .kbq-button-icon.kbq-button_filled:not(:hover),
+        & .kbq-button.kbq-button_filled,
+        & .kbq-button.kbq-button_filled:hover {
+            background: var(--kbq-states-background-disabled);
+        }
+
+        & .kbq-pipe__name,
+        & .kbq-pipe__value {
+            color: var(--kbq-states-foreground-disabled);
+        }
+    }
+}

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

@@ -1,11 +1,11 @@
-import { OnInit } from '@angular/core';
+import { AfterViewInit, OnInit } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { KbqSelect } from '@koobiq/components/select';
 import { Observable } from 'rxjs';
 import { KbqSelectValue } from '../filter-bar.types';
 import { KbqBasePipe } from './base-pipe';
 import * as i0 from "@angular/core";
-export declare class KbqPipeSelectComponent extends KbqBasePipe<KbqSelectValue> implements OnInit {
+export declare class KbqPipeSelectComponent extends KbqBasePipe<KbqSelectValue> implements AfterViewInit, OnInit {
     /** control for search options */
     searchControl: UntypedFormControl;
     /** filtered by search options */
@@ -16,7 +16,10 @@ export declare class KbqPipeSelectComponent extends KbqBasePipe<KbqSelectValue>
     get selected(): KbqSelectValue | null;
     /** Whether the current pipe is empty. */
     get isEmpty(): boolean;
+    /** @docs-private */
     ngOnInit(): void;
+    /** @docs-private */
+    ngAfterViewInit(): void;
     onSelect(item: KbqSelectValue): void;
     /** Comparator of selected options */
     compareByValue: (o1: any, o2: any) => boolean;

package/filter-bar/pipes/pipe-state.d.ts

@@ -1,12 +1,18 @@
 import { OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class KbqPipeState<T> implements OnInit {
+    /** @docs-private */
     private readonly destroyRef;
+    /** @docs-private */
     private readonly button;
+    /** @docs-private */
     private readonly pipe;
+    /** KbqFilterBar instance
+     * @docs-private */
+    private readonly filterBar;
     /** calculates and updates styles of button from pipe state */
-    set state(pipe: T | null);
     get state(): T | null;
+    set state(pipe: T | null);
     private _state;
     ngOnInit(): void;
     private updateState;

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

@@ -13,6 +13,7 @@ export * from './pipes/pipe-button';
 export * from './pipes/pipe-date';
 export * from './pipes/pipe-datetime';
 export * from './pipes/pipe-multi-select';
+export * from './pipes/pipe-readonly';
 export * from './pipes/pipe-select';
 export * from './pipes/pipe-state';
 export * from './pipes/pipe-text';

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

@@ -77,7 +77,7 @@
         &.kbq-disabled {
             @include kbq-form-field-state(states-disabled);
 
-            .kbq-icon {
+            .kbq-icon.kbq-empty {
                 color: var(--kbq-form-field-states-disabled-text);
                 -webkit-text-fill-color: var(--kbq-form-field-states-disabled-text);
             }
@@ -86,7 +86,7 @@
 
     .kbq-form-field__prefix,
     .kbq-form-field__suffix {
-        .kbq-icon {
+        .kbq-icon.kbq-empty {
             color: var(--kbq-icon-contrast-fade);
         }
     }

package/form-field/_hint-theme.scss

@@ -4,7 +4,7 @@
 @mixin kbq-hint-color($type, $style-name) {
     color: var(--kbq-hint-#{$type}-#{$style-name}-text);
 
-    & .kbq-icon {
+    & .kbq-icon.kbq-empty {
         color: var(--kbq-hint-#{$type}-#{$style-name}-icon) !important;
     }
 }

package/link/_link-theme.scss

@@ -108,7 +108,7 @@
         }
     }
 
-    & .kbq-icon {
+    & .kbq-icon.kbq-empty {
         color: var(--kbq-#{$base-path}-text) !important;
     }
 }

package/list/_list-theme.scss

@@ -7,11 +7,11 @@
         color: var(--kbq-list-#{$state-name}-text-color);
     }
 
-    .kbq-icon {
+    .kbq-icon.kbq-empty {
         color: var(--kbq-list-#{$state-name}-icon-color);
     }
 
-    .kbq-option-action .kbq-icon {
+    .kbq-option-action .kbq-icon.kbq-empty {
         color: var(--kbq-list-#{$state-name}-icon-button-color);
     }
 

package/markdown/markdown.scss

@@ -1,3 +1,5 @@
+// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
+/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens' as *;
 
 .kbq-markdown {
@@ -122,7 +124,7 @@
         border-radius: var(--kbq-markdown-code-size-border-radius);
     }
 
-    .kbq-markdown__code {
+    .kbq-markdown__code:not(.kbq-markdown__pre > .kbq-markdown__code) {
         white-space: nowrap;
         padding: var(--kbq-markdown-code-size-inline-padding);
     }

package/modal/modal.scss

@@ -1,3 +1,5 @@
+// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
+/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens' as *;
 
 @use './modal-confirm';

package/navbar/_navbar-theme.scss

@@ -12,7 +12,7 @@
         color: var(--kbq-navbar-item-#{$state-name}-content-text);
     }
 
-    & > .kbq-icon {
+    & > .kbq-icon.kbq-empty {
         color: var(--kbq-navbar-item-#{$state-name}-content-icon-left) !important;
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.26.0",
+    "version": "18.28.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,13 +24,13 @@
         "@angular/cdk": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@angular/forms": "^18.0.0",
-        "@koobiq/cdk": "18.26.0",
-        "@koobiq/angular-moment-adapter": "18.26.0",
-        "@koobiq/angular-luxon-adapter": "18.26.0",
+        "@koobiq/cdk": "18.28.0",
+        "@koobiq/angular-moment-adapter": "18.28.0",
+        "@koobiq/angular-luxon-adapter": "18.28.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^9.4.0",
         "@koobiq/tokens-builder": "3.11.0",
-        "@koobiq/design-tokens": "3.12.1",
+        "@koobiq/design-tokens": "3.13.2",
         "@radix-ng/primitives": "^0.23.0"
     },
     "dependencies": {