@koobiq/components 18.19.0 → 18.21.0

package/filter-bar/filter-bar.scss

@@ -34,6 +34,7 @@
 .kbq-pipe__popover {
     .kbq-popover__container {
         min-width: 320px;
+        max-width: 320px;
     }
 
     .kbq-popover__content {

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

@@ -19,12 +19,13 @@ export declare class KbqPipeDateComponent<D> extends KbqBasePipe<KbqDateTimeValu
     get formattedValue(): string;
     get disabled(): boolean;
     get start(): any;
+    get defaultStart(): any;
     get end(): any;
+    get defaultEnd(): any;
     get isEmpty(): boolean;
     popover: KbqPopoverTrigger;
     listSelection: import("@angular/core").Signal<KbqListSelection>;
     returnButton: import("@angular/core").Signal<KbqButton>;
-    constructor();
     onKeydown($event: KeyboardEvent): void;
     onApplyPeriod(): void;
     onSelect(item: KbqDateTimeValue): void;
@@ -36,6 +37,7 @@ export declare class KbqPipeDateComponent<D> extends KbqBasePipe<KbqDateTimeValu
     onFocusStartInput(): void;
     onFocusEndInput(): void;
     hideCalendars(): void;
+    private initFormGroup;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeDateComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeDateComponent<any>, "kbq-pipe-date", never, {}, {}, never, never, true, never>;
 }

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

@@ -4,6 +4,10 @@
 @use '../../datepicker/datepicker-tokens' as *;
 
 .kbq-pipe-date__popover {
+    &.kbq-popover.kbq-popover_medium {
+        margin-top: var(--kbq-size-xxs);
+    }
+
     & .kbq-popover__container {
         max-height: unset;
     }
@@ -16,6 +20,9 @@
         margin: var(--kbq-size-xxs) 0;
 
         & .kbq-list-option {
+            margin-left: var(--kbq-size-xxs);
+            margin-right: var(--kbq-size-xxs);
+
             & .kbq-list-text {
                 display: flex;
                 flex-direction: row;

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

@@ -19,12 +19,13 @@ export declare class KbqPipeDatetimeComponent<D> extends KbqBasePipe<KbqDateTime
     get formattedValue(): string;
     get disabled(): boolean;
     get start(): any;
+    get defaultStart(): any;
     get end(): any;
+    get defaultEnd(): any;
     get isEmpty(): boolean;
     popover: KbqPopoverTrigger;
     listSelection: import("@angular/core").Signal<KbqListSelection>;
     returnButton: import("@angular/core").Signal<KbqButton>;
-    constructor();
     onKeydown($event: KeyboardEvent): void;
     onApplyPeriod(): void;
     onSelect(item: KbqDateTimeValue): void;
@@ -36,6 +37,7 @@ export declare class KbqPipeDatetimeComponent<D> extends KbqBasePipe<KbqDateTime
     onFocusStartInput(): void;
     onFocusEndInput(): void;
     hideCalendars(): void;
+    private initFormGroup;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPipeDatetimeComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeDatetimeComponent<any>, "kbq-pipe-datetime", never, {}, {}, never, never, true, never>;
 }

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

@@ -40,8 +40,10 @@
             }
         }
 
+        // Invalid by control `ErrorStateMatcher`
         &.kbq-form-field_invalid,
-        &.ng-invalid {
+        // Invalid by `KbqValidateDirective`
+        &.kbq-form-field_has-validate-directive.ng-invalid {
             @include kbq-form-field-state(states-error);
         }
 
@@ -60,11 +62,13 @@
                 }
             }
 
+            // Invalid by control `ErrorStateMatcher`
             &.kbq-form-field_invalid,
-            &.ng-invalid {
+            // Invalid by `KbqValidateDirective`
+            &.kbq-form-field_has-validate-directive.ng-invalid {
                 @include kbq-form-field-state(states-error);
 
-                & .kbq-form-field__container {
+                &.cdk-focused .kbq-form-field__container {
                     box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-error-focused-focus-outline);
                 }
             }

package/form-field/validate.directive.d.ts

@@ -1,6 +1,7 @@
 import { AfterContentInit, ChangeDetectorRef } from '@angular/core';
 import { AbstractControl, FormGroupDirective, NgControl, NgForm, Validator, ValidatorFn } from '@angular/forms';
 import { KbqValidationOptions } from '@koobiq/components/core';
+import { KbqFormField } from './form-field';
 import { KbqFormFieldControl } from './form-field-control';
 import * as i0 from "@angular/core";
 /**
@@ -31,13 +32,14 @@ export declare class KbqValidateDirective implements AfterContentInit {
     private parentFormGroup;
     private mcValidation;
     private cdr;
+    private readonly parentFormField;
     get isNgModel(): boolean;
     get isFormControlName(): boolean;
     get isFormControl(): boolean;
     get validationControl(): any;
     get parent(): NgForm;
     get hasNotSubmittedParent(): boolean;
-    constructor(formFieldControl: KbqFormFieldControl<any>, rawValidators: Validator[], ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, mcValidation: KbqValidationOptions, cdr: ChangeDetectorRef);
+    constructor(formFieldControl: KbqFormFieldControl<any>, rawValidators: Validator[], ngControl: NgControl, parentForm: NgForm, parentFormGroup: FormGroupDirective, mcValidation: KbqValidationOptions, cdr: ChangeDetectorRef, parentFormField: KbqFormField | null);
     ngAfterContentInit(): void;
     setValidState(control: AbstractControl, validator: ValidatorFn): void;
     /** This function do next:
@@ -48,6 +50,6 @@ export declare class KbqValidateDirective implements AfterContentInit {
     setMosaicValidation(): void;
     setMosaicValidationForModelControl(): void;
     setMosaicValidationForFormControl(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqValidateDirective, [null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }, { optional: true; }, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqValidateDirective, [null, { optional: true; self: true; }, { optional: true; self: true; }, { optional: true; }, { optional: true; }, { optional: true; }, null, { optional: true; host: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqValidateDirective, "        input[kbqInput],        input[kbqNumberInput],        input[kbqInputPassword],        input[kbqTimepicker],        input[kbqDatepicker],        textarea[kbqTextarea],        kbq-select,        kbq-tree-select,        kbq-tag-list    ", ["KbqValidate"], {}, {}, never, never, false, never>;
 }

package/link/_link-theme.scss

@@ -14,11 +14,11 @@
         outline: none;
     }
 
-    &.kbq-text-only:not(.kbq-text-with-dot),
-    &.kbq-text-with-icon .kbq-link__text,
-    &.kbq-text-with-dot .kbq-link__text {
+    &.kbq-text-only,
+    & .kbq-link__text {
         border-bottom-style: solid;
         border-bottom-width: 1px;
+        border-bottom-color: transparent;
     }
 
     &.kbq-text-with-icon {
@@ -60,15 +60,6 @@
         }
     }
 
-    &.kbq-link_no-underline,
-    &.kbq-link_pseudo {
-        &.kbq-text-only,
-        &.kbq-text-with-icon .kbq-link__text,
-        &.kbq-text-with-dot .kbq-link__text {
-            border-bottom-color: transparent;
-        }
-    }
-
     &.kbq-text-with-icon.kbq-link_external {
         .kbq-link__text:not(:last-child) {
             margin-right: 1px;
@@ -101,10 +92,9 @@
 
     color: var(--kbq-#{$base-path}-text);
 
-    &:not(.kbq-link_pseudo) {
-        &.kbq-text-only,
-        &.kbq-text-with-icon .kbq-link__text,
-        &.kbq-text-with-dot .kbq-link__text {
+    &:not(.kbq-link_pseudo, .kbq-link_no-underline) {
+        &.kbq-text-only:not(.kbq-text-with-dot),
+        & .kbq-link__text {
             border-bottom-color: var(--kbq-#{$base-path}-border-bottom);
         }
     }

package/list/list.scss

@@ -1,6 +1,6 @@
 @use '../core/styles/common/list';
 @use '../core/styles/common/tokens' as *;
-
+@use '../core/styles/common/vendor-prefixes';
 @use './list-theme' as *;
 
 .kbq-list,
@@ -11,8 +11,7 @@
 
 .kbq-list-item,
 .kbq-list-option {
-    @include list.kbq-no-select;
-
+    @include vendor-prefixes.user-select(none);
     @include list.kbq-list-item-base();
 
     border-radius: var(--kbq-size-border-radius);

package/navbar/navbar-item.component.d.ts

@@ -116,8 +116,8 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
     get trigger(): string;
     set trigger(value: string);
     set collapsed(value: boolean);
+    get isCollapsed(): boolean;
     private _collapsed;
-    isCollapsed: boolean;
     get croppedText(): string;
     get collapsable(): boolean;
     set collapsable(value: boolean);
@@ -134,7 +134,6 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
     updateTooltip(): void;
     getTitleWidth(): number;
     onKeyDown($event: KeyboardEvent): void;
-    private updateCollapsedState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarItem, "kbq-navbar-item, [kbq-navbar-item]", ["kbqNavbarItem"], { "collapsedText": { "alias": "collapsedText"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "collapsable": { "alias": "collapsable"; "required": false; }; }, {}, ["title", "icon"], ["[kbq-icon]", "kbq-navbar-title, [kbq-navbar-title]", "*"], false, never>;
 }

package/navbar/vertical-navbar.component.d.ts

@@ -20,7 +20,10 @@ export declare class KbqVerticalNavbar extends KbqFocusableComponent implements
     onKeyDown(event: KeyboardEvent): void;
     private updateExpandedStateForItems;
     private updateTooltipForItems;
-    private setItemsState;
+    private setItemsVerticalStateAndUpdateExpandedState;
+    private setItemVerticalStateAndUpdateExpandedState;
+    private setItemVerticalState;
+    private updateItemExpandedState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqVerticalNavbar, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqVerticalNavbar, "kbq-vertical-navbar", ["KbqVerticalNavbar"], { "openOver": { "alias": "openOver"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, {}, ["bento", "rectangleElements", "items"], ["[kbq-navbar-container], kbq-navbar-container", "[kbq-navbar-toggle], kbq-navbar-toggle"], false, never>;
 }

package/overflow-items/overflow-items.d.ts

@@ -49,8 +49,18 @@ export declare class KbqOverflowItem extends ElementVisibilityManager {
      * Unique identifier for the item.
      */
     readonly id: import("@angular/core").InputSignal<unknown>;
+    /**
+     * Defines the order in which the item is processed in the overflow container,
+     * without changing its original position in the `QueryList`.
+     */
+    readonly order: import("@angular/core").InputSignalWithTransform<number | null, unknown>;
+    /**
+     * Element with this attribute will be ignored when hiding and will always remain visible.
+     * @default false
+     */
+    readonly alwaysVisible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItem, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItem, "[kbqOverflowItem]", ["kbqOverflowItem"], { "id": { "alias": "kbqOverflowItem"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItem, "[kbqOverflowItem]", ["kbqOverflowItem"], { "id": { "alias": "kbqOverflowItem"; "required": true; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; "alwaysVisible": { "alias": "alwaysVisible"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /**
  * Directive for managing the visibility of items that overflow the container.
@@ -93,6 +103,12 @@ export declare class KbqOverflowItems {
     private readonly renderer;
     private readonly document;
     constructor();
+    /**
+     * Returns a list of items sorted by their specified `order` value.
+     * If an item does not have an `order` defined, its index is used as a fallback.
+     * This ensures a stable order while allowing custom positioning.
+     */
+    private getSortedItemsByOrder;
     /**
      * Calculates the visibility of items, based on the container width and `reverseOverflowOrder` property.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.19.0",
+    "version": "18.21.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.19.0",
-        "@koobiq/angular-moment-adapter": "18.19.0",
-        "@koobiq/angular-luxon-adapter": "18.19.0",
+        "@koobiq/cdk": "18.21.0",
+        "@koobiq/angular-moment-adapter": "18.21.0",
+        "@koobiq/angular-luxon-adapter": "18.21.0",
         "@koobiq/date-formatter": "^3.2.3",
-        "@koobiq/icons": "^9.3.0",
+        "@koobiq/icons": "^9.4.0",
         "@koobiq/tokens-builder": "3.11.0",
-        "@koobiq/design-tokens": "3.11.2",
+        "@koobiq/design-tokens": "3.12.1",
         "@radix-ng/primitives": "^0.14.0"
     },
     "dependencies": {