@koobiq/components 18.19.0 → 18.21.0

package/scrollbar/scrollbar-tokens.scss

@@ -1,4 +1,4 @@
-.kbq-scrollbar-component {
+:where(.kbq-scrollbar-component) {
     --kbq-scrollbar-size-track-dimension: var(--kbq-size-l);
     --kbq-scrollbar-size-track-padding-vertical: var(--kbq-size-3xs);
     --kbq-scrollbar-size-track-padding-horizontal: var(--kbq-size-3xs);
@@ -6,9 +6,9 @@
     --kbq-scrollbar-size-thumb-min-size: var(--kbq-size-xl);
     --kbq-scrollbar-size-thumb-border-radius: var(--kbq-size-s);
     /* THEME TOKENS */
-    --kbq-scrollbar-thumb-default-background: var(--kbq-icon-contrast-fade);
-    --kbq-scrollbar-thumb-hover-background: var(--kbq-states-icon-contrast-fade-hover);
-    --kbq-scrollbar-thumb-active-background: var(--kbq-states-icon-contrast-fade-active);
+    --kbq-scrollbar-thumb-default-background: var(--kbq-palette-grey-50-a32);
+    --kbq-scrollbar-thumb-hover-background: var(--kbq-palette-grey-50-a48);
+    --kbq-scrollbar-thumb-active-background: var(--kbq-palette-grey-20-a55);
     --kbq-scrollbar-thumb-disabled-background: var(--kbq-states-icon-disabled);
     --kbq-scrollbar-track-default-border: transparent;
     --kbq-scrollbar-track-default-background: transparent;
@@ -17,3 +17,9 @@
     --kbq-scrollbar-track-active-border: transparent;
     --kbq-scrollbar-track-active-background: transparent;
 }
+
+:where(.kbq-dark .kbq-scrollbar-component) {
+    --kbq-scrollbar-thumb-default-background: var(--kbq-palette-grey-50-a48);
+    --kbq-scrollbar-thumb-hover-background: var(--kbq-palette-grey-50-a60);
+    --kbq-scrollbar-thumb-active-background: var(--kbq-palette-grey-50-a80);
+}

package/select/_select-theme.scss

@@ -6,7 +6,10 @@
     .kbq-select {
         color: var(--kbq-foreground-contrast);
 
-        &.ng-invalid {
+        // Invalid by `KbqValidateDirective`
+        &.kbq-control_has-validate-directive.ng-invalid,
+        // Invalid by control `ErrorStateMatcher`
+        &.kbq-invalid {
             color: var(--kbq-error-default);
 
             .kbq-select__placeholder {

package/sidepanel/sidepanel-directives.d.ts

@@ -21,9 +21,14 @@ export declare class KbqSidepanelClose implements OnInit, OnChanges {
  * Header of a sidepanel.
  */
 export declare class KbqSidepanelHeader {
+    /** Add button for close sidepanel. Default false */
     closeable: boolean;
+    /** Enables text truncation. Default true */
+    truncateText: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSidepanelHeader, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSidepanelHeader, "kbq-sidepanel-header", never, { "closeable": { "alias": "closeable"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqSidepanelHeader, "kbq-sidepanel-header", never, { "closeable": { "alias": "closeable"; "required": false; }; "truncateText": { "alias": "truncateText"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ngAcceptInputType_closeable: unknown;
+    static ngAcceptInputType_truncateText: unknown;
 }
 /**
  * Scrollable content container of a sidepanel.

package/sidepanel/sidepanel.scss

@@ -115,7 +115,7 @@
 
 .kbq-sidepanel-header {
     display: flex;
-    align-items: center;
+    align-items: baseline;
     justify-content: space-between;
 
     flex-flow: row nowrap;
@@ -127,12 +127,18 @@
     .kbq-sidepanel-close {
         margin-left: var(--kbq-sidepanel-size-close-button-margin-left);
     }
+
+    &.kbq-sidepanel-header_truncate-text {
+        align-items: center;
+
+        .kbq-sidepanel-title {
+            @include common.kbq-truncate-line();
+        }
+    }
 }
 
 .kbq-sidepanel-title {
     flex: 1;
-
-    @include common.kbq-truncate-line();
 }
 
 .kbq-sidepanel-body {

package/tags/tag.scss

@@ -1,6 +1,9 @@
 @use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/vendor-prefixes';
 
 .kbq-tag {
+    @include vendor-prefixes.user-select(none);
+
     position: relative;
 
     display: inline-block;

package/textarea/textarea.component.d.ts

@@ -27,9 +27,15 @@ export declare class KbqTextarea extends KbqTextareaMixinBase implements KbqForm
     protected elementRef: ElementRef;
     private parent;
     private ngZone;
+    /** Parameter enables or disables the ability to automatically increase the height.
+     * If set to false, the textarea becomes vertically resizable. */
+    set canGrow(value: boolean);
+    get canGrow(): boolean;
     protected readonly isBrowser: boolean;
     protected readonly renderer: Renderer2;
-    canGrow: boolean;
+    private _canGrow;
+    /** Maximum number of lines to which the textarea will grow. Default unlimited */
+    maxRows: number;
     /** An object used to control when error messages are shown. */
     errorStateMatcher: ErrorStateMatcher;
     /**
@@ -64,6 +70,8 @@ export declare class KbqTextarea extends KbqTextareaMixinBase implements KbqForm
      * @docs-private
      */
     placeholder: string;
+    /** Distance from the last line to the bottom border */
+    freeRowsHeight: number;
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
@@ -76,6 +84,9 @@ export declare class KbqTextarea extends KbqTextareaMixinBase implements KbqForm
      */
     get value(): string;
     set value(value: string);
+    /** Flag that will be set to true when the maximum number of lines is reached.
+     * Maximum number of rows can be set using the maxRows input. */
+    get maxRowLimitReached(): boolean;
     protected uid: string;
     protected previousNativeValue: any;
     private _disabled;
@@ -84,8 +95,8 @@ export declare class KbqTextarea extends KbqTextareaMixinBase implements KbqForm
     private valueAccessor;
     private growSubscription;
     private lineHeight;
-    private freeRowsHeight;
     private minHeight;
+    private rowsCount;
     constructor(elementRef: ElementRef, ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, defaultErrorStateMatcher: ErrorStateMatcher, inputValueAccessor: any, parent: any, ngZone: NgZone);
     ngOnInit(): void;
     ngOnChanges(): void;
@@ -113,5 +124,7 @@ export declare class KbqTextarea extends KbqTextareaMixinBase implements KbqForm
     /** Checks whether the textarea is invalid based on the native validation. */
     protected isBadInput(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTextarea, [null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }, { optional: true; host: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTextarea, "textarea[kbqTextarea]", ["kbqTextarea"], { "canGrow": { "alias": "canGrow"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTextarea, "textarea[kbqTextarea]", ["kbqTextarea"], { "canGrow": { "alias": "canGrow"; "required": false; }; "maxRows": { "alias": "maxRows"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "freeRowsHeight": { "alias": "freeRowsHeight"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, never, false, never>;
+    static ngAcceptInputType_canGrow: unknown;
+    static ngAcceptInputType_freeRowsHeight: unknown;
 }

package/textarea/textarea.scss

@@ -30,6 +30,10 @@
         resize: vertical;
         min-height: var(--kbq-textarea-size-min-height);
     }
+
+    &.kbq-textarea_max-row-limit-reached {
+        resize: unset;
+    }
 }
 
 /* remove default red border for HTML5 validation invalid fields in Firefox */

package/timezone/timezone-option-tokens.scss

@@ -1,4 +1,5 @@
 @use '../list/list-tokens';
+@use '../core/option/option-tokens';
 
 .kbq-timezone-select__panel {
     --kbq-select-size-single-padding-left: var(--kbq-size-m);
@@ -8,7 +9,7 @@
     --kbq-select-size-multiple-padding-left: var(--kbq-size-xxs);
     --kbq-select-size-multiple-padding-right: var(--kbq-size-xxs);
     --kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);
-    --kbq-timezone-option-size-padding: 6px 10px;
+    --kbq-timezone-option-size-padding: var(--kbq-size-xxs) 10px;
     --kbq-timezone-option-size-column-gap: 16px;
     --kbq-timezone-option-size-height: auto;
     --kbq-timezone-option-size-max-height: 5em;
@@ -20,5 +21,5 @@
     --kbq-timezone-option-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-timezone-option-optgroup-label: var(--kbq-foreground-contrast-secondary);
     /* LIST THEME TOKENS */
-    @include list-tokens.list-theme-tokens;
+    @extend %kbq-option-geometry-tokens;
 }

package/top-bar/top-bar-tokens.scss

@@ -2,8 +2,8 @@
     --kbq-top-bar-position: sticky;
     --kbq-top-bar-background: var(--kbq-background-bg);
     --kbq-top-bar-spacer-min-width: 80px;
-    --kbq-top-bar-padding-vertical: var(--kbq-size-l);
-    --kbq-top-bar-padding-horizontal: var(--kbq-size-l);
+    --kbq-top-bar-padding-vertical: var(--kbq-size-xl);
+    --kbq-top-bar-padding-horizontal: var(--kbq-size-xxl);
     --kbq-top-bar-border-radius: 0;
     --kbq-top-bar-left-gap: 0;
     --kbq-top-bar-right-gap: var(--kbq-size-s);

package/top-bar/top-bar.scss

@@ -10,7 +10,7 @@
     position: var(--kbq-top-bar-position);
     background-color: var(--kbq-top-bar-background);
     padding: var(--kbq-top-bar-padding-vertical) var(--kbq-top-bar-padding-horizontal);
-    border: var(--kbq-top-bar-border-radius);
+    border-radius: var(--kbq-top-bar-border-radius);
 
     .kbq-top-bar-spacer {
         height: 100%;

package/tree/tree-option.scss

@@ -1,8 +1,9 @@
 @use '../core/styles/common';
 @use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/vendor-prefixes';
 
 .kbq-tree-option {
-    @include common.kbq-no-select;
+    @include vendor-prefixes.user-select(none);
 
     box-sizing: border-box;
 

package/tree-select/_tree-select-theme.scss

@@ -4,7 +4,10 @@
     .kbq-tree-select {
         color: var(--kbq-foreground-contrast);
 
-        &.ng-invalid {
+        // Invalid by `KbqValidateDirective`
+        &.kbq-control_has-validate-directive.ng-invalid,
+        // Invalid by control `ErrorStateMatcher`
+        &.kbq-invalid {
             color: var(--kbq-error-default);
 
             .kbq-select__placeholder {