@koobiq/components 18.26.0 → 18.27.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.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,10 +85,11 @@ export interface KbqPipe {
     type: KbqPipeType;
     value: unknown | null;
     search?: boolean;
+    selectAll?: boolean;
     required: boolean;
-    cleanable: boolean;
-    removable: boolean;
-    disabled: boolean;
+    cleanable?: boolean;
+    removable?: boolean;
+    disabled?: boolean;
 }
 export interface KbqPipeData<V> extends KbqPipe {
     value: V | null;

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,5 +1,6 @@
-import { OnInit } from '@angular/core';
+import { 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';
@@ -12,13 +13,26 @@ export declare class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectVa
     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 */
     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-state.d.ts

@@ -1,9 +1,15 @@
 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;

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 {

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.27.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,9 +24,9 @@
         "@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.27.0",
+        "@koobiq/angular-moment-adapter": "18.27.0",
+        "@koobiq/angular-luxon-adapter": "18.27.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^9.4.0",
         "@koobiq/tokens-builder": "3.11.0",