@koobiq/components 18.25.0 → 18.27.0

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

@@ -1,4 +1,6 @@
-@use '../core/styles/common/tokens' as *;
+// @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() {
     .kbq-file-upload {
@@ -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);
                 }
             }
@@ -135,39 +137,39 @@
     .kbq-single-file-upload {
         & .file-item__text-wrapper,
         & .dropzone__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-multiple-file-upload {
         .multiple__header {
-            @include kbq-typography-level-to-styles-css-variables(typography, subheading);
+            @include tokens.kbq-typography-level-to-styles-css-variables(typography, subheading);
         }
 
         .multiple__caption {
             &,
             .kbq-link {
-                @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+                @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
             }
         }
 
         .kbq-file-multiple-uploaded__header {
-            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
 
         .multiple__uploaded-item {
-            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
 
         .kbq-file-upload {
             .kbq-list-item,
             .kbq-list-option {
-                @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+                @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
             }
         }
     }
 
     .kbq-file-upload__hint .kbq-hint .kbq-hint__text {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
     }
 }

package/file-upload/file-upload.scss

@@ -1,4 +1,7 @@
-@use './file-upload-theme' as *;
+// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
+/* stylelint-disable selector-class-pattern */
+
+@use './file-upload-theme' as theme;
 
 .kbq-file-upload {
     box-sizing: border-box;
@@ -37,5 +40,5 @@
     }
 }
 
-@include kbq-file-upload-theme();
-@include kbq-file-upload-typography();
+@include theme.kbq-file-upload-theme();
+@include theme.kbq-file-upload-typography();

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

@@ -1,17 +1,17 @@
-@use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/tokens';
 
-@mixin kbq-list-item($state-name) {
+@mixin _kbq-list-item($state-name) {
     background: var(--kbq-list-#{$state-name}-container-background);
 
     .kbq-list-text {
         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);
     }
 
@@ -22,32 +22,22 @@
 
 @mixin kbq-list-theme() {
     .kbq-list-option {
-        @include kbq-list-item(default);
+        @include _kbq-list-item(default);
 
         &:hover:not(.kbq-disabled) {
-            @include kbq-list-item(states-hover);
+            @include _kbq-list-item(states-hover);
         }
 
         &.kbq-selected {
-            @include kbq-list-item(states-selected);
+            @include _kbq-list-item(states-selected);
 
             &:hover:not(.kbq-disabled) {
-                @include kbq-list-item(states-selected-hover);
+                @include _kbq-list-item(states-selected-hover);
             }
         }
 
         &.kbq-disabled {
-            @include kbq-list-item(states-disabled);
-        }
-
-        &:is(.kbq-selected, .kbq-focused):has(+ :is(.kbq-selected, .kbq-focused)) {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-
-        &:is(.kbq-selected, .kbq-focused) + :is(.kbq-selected, .kbq-focused) {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
+            @include _kbq-list-item(states-disabled);
         }
     }
 
@@ -61,11 +51,11 @@
 @mixin kbq-list-typography() {
     .kbq-list-item,
     .kbq-list-option {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
 
         .kbq-list-text {
             .kbq-list-option-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/list/list.scss

@@ -1,7 +1,22 @@
 @use '../core/styles/common/list';
-@use '../core/styles/common/tokens' as *;
 @use '../core/styles/common/vendor-prefixes';
-@use './list-theme' as *;
+@use './list-theme' as theme;
+
+@mixin _kbq-list-item-border-radius() {
+    $selectors: '.kbq-selected';
+
+    border-radius: var(--kbq-size-border-radius);
+
+    &:is(#{$selectors}):has(+ :is(#{$selectors})) {
+        border-bottom-left-radius: unset;
+        border-bottom-right-radius: unset;
+    }
+
+    &:is(#{$selectors}) + :is(#{$selectors}) {
+        border-top-left-radius: unset;
+        border-top-right-radius: unset;
+    }
+}
 
 .kbq-list,
 .kbq-list-selection {
@@ -13,8 +28,7 @@
 .kbq-list-option {
     @include vendor-prefixes.user-select(none);
     @include list.kbq-list-item-base();
-
-    border-radius: var(--kbq-size-border-radius);
+    @include _kbq-list-item-border-radius();
 
     &:not(.kbq-disabled) {
         cursor: pointer;
@@ -35,5 +49,5 @@
     }
 }
 
-@include kbq-list-theme();
-@include kbq-list-typography();
+@include theme.kbq-list-theme();
+@include theme.kbq-list-typography();

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-tokens.scss

@@ -5,7 +5,7 @@
     --kbq-modal-size-border-radius: var(--kbq-size-s);
     --kbq-modal-size-header-padding-vertical: var(--kbq-size-l);
     --kbq-modal-size-header-padding-left: var(--kbq-size-xxl);
-    --kbq-modal-size-header-padding-right: var(--kbq-size-5xl);
+    --kbq-modal-size-header-padding-right: var(--kbq-size-6xl);
     --kbq-modal-size-close-button-margin-left: var(--kbq-size-s);
     --kbq-modal-size-content-padding-horizontal: var(--kbq-size-xxl);
     --kbq-modal-size-content-padding-top: 0;

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';
@@ -9,7 +11,7 @@
 
     position: relative;
 
-    top: 48px;
+    top: var(--kbq-size-5xl);
 
     border-radius: var(--kbq-modal-size-border-radius);
 
@@ -50,8 +52,8 @@
     & .kbq-modal-close {
         position: absolute;
 
-        top: 16px;
-        right: 8px;
+        top: var(--kbq-size-l);
+        right: var(--kbq-size-l);
     }
 }
 
@@ -95,6 +97,9 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
+
+    padding-top: var(--kbq-size-3xs);
+    padding-bottom: var(--kbq-size-3xs);
 }
 
 .kbq-modal-body {

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.25.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.25.0",
-        "@koobiq/angular-moment-adapter": "18.25.0",
-        "@koobiq/angular-luxon-adapter": "18.25.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",

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, TemplateRef, Type } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ElementRef, EventEmitter, InjectionToken, OnInit, TemplateRef, Type } from '@angular/core';
 import { KbqComponentColors, KbqPopUp, KbqPopUpTrigger, PopUpPlacements, PopUpSizes } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewInit {
@@ -38,7 +38,7 @@ export declare const KBQ_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
 };
 /** Creates an error to be thrown if the user supplied an invalid popover position. */
 export declare function getKbqPopoverInvalidPositionError(position: string): Error;
-export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> implements AfterContentInit {
+export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> implements AfterContentInit, OnInit {
     protected scrollStrategy: () => ScrollStrategy;
     get popoverVisible(): boolean;
     set popoverVisible(value: boolean);
@@ -86,6 +86,7 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     visibleChange: EventEmitter<boolean>;
     protected originSelector: string;
     protected get overlayConfig(): OverlayConfig;
+    ngOnInit(): void;
     ngAfterContentInit(): void;
     updateData(): void;
     /** Updates the position of the current popover. */
@@ -94,7 +95,8 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     updateClassMap(newPlacement?: string): void;
     closingActionsForClick(): import("rxjs").Observable<MouseEvent>[];
     defaultClosingActions(): import("rxjs").Observable<MouseEvent>[];
-    closingActions(): import("rxjs").Observable<void | MouseEvent | CdkScrollable>;
+    closingActions(): import("rxjs").Observable<void | CdkScrollable | MouseEvent>;
+    private hideIfNotInViewPort;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
     static ngAcceptInputType_arrow: unknown;