@koobiq/components 18.20.0 → 18.21.0

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/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-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 {