@koobiq/components 18.20.0 → 18.22.0

package/loader-overlay/_loader-overlay-theme.scss

@@ -7,11 +7,11 @@
             background: var(--kbq-loader-overlay-filled-overlay-background);
         }
 
-        & .kbq-loader-overlay-text {
+        .kbq-loader-overlay-text {
             color: var(--kbq-loader-overlay-filled-text-color);
         }
 
-        & .kbq-loader-overlay-caption {
+        .kbq-loader-overlay-caption {
             color: var(--kbq-loader-overlay-filled-caption-color);
         }
     }
@@ -21,11 +21,11 @@
             background: var(--kbq-loader-overlay-transparent-overlay-background);
         }
 
-        & .kbq-loader-overlay-text {
+        .kbq-loader-overlay-text {
             color: var(--kbq-loader-overlay-transparent-text-color);
         }
 
-        & .kbq-loader-overlay-caption {
+        .kbq-loader-overlay-caption {
             color: var(--kbq-loader-overlay-transparent-caption-color);
         }
     }
@@ -33,21 +33,31 @@
 
 @mixin kbq-loader-overlay-typography() {
     .kbq-loader-overlay_big {
-        & .kbq-loader-overlay-text {
+        .kbq-loader-overlay-text {
+            @include kbq-typography-level-to-styles-css-variables(typography, headline);
+        }
+
+        .kbq-loader-overlay-caption {
+            @include kbq-typography-level-to-styles-css-variables(typography, text-big);
+        }
+    }
+
+    .kbq-loader-overlay_normal {
+        .kbq-loader-overlay-text {
             @include kbq-typography-level-to-styles-css-variables(typography, subheading);
         }
 
-        & .kbq-loader-overlay-caption {
+        .kbq-loader-overlay-caption {
             @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
     }
 
     .kbq-loader-overlay_compact {
-        & .kbq-loader-overlay-text {
+        .kbq-loader-overlay-text {
             @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
 
-        & .kbq-loader-overlay-caption {
+        .kbq-loader-overlay-caption {
             @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
         }
     }

package/loader-overlay/loader-overlay-tokens.scss

@@ -1,10 +1,13 @@
-.kbq-loader-overlay {
+:where(.kbq-loader-overlay) {
     --kbq-loader-overlay-size-big-overlay-padding-horizontal: var(--kbq-size-3xl);
     --kbq-loader-overlay-size-big-loader-margin-bottom: var(--kbq-size-xxl);
-    --kbq-loader-overlay-size-big-content-content-gap-vertical: var(--kbq-size-xxs);
+    --kbq-loader-overlay-size-big-content-content-gap-vertical: var(--kbq-size-l);
+    --kbq-loader-overlay-size-normal-overlay-padding-horizontal: var(--kbq-sizeа-3xl);
+    --kbq-loader-overlay-size-normal-loader-margin-bottom: var(--kbq-size-xxl);
+    --kbq-loader-overlay-size-normal-content-content-gap-vertical: var(--kbq-size-xxs);
     --kbq-loader-overlay-size-compact-overlay-padding-horizontal: var(--kbq-size-3xl);
     --kbq-loader-overlay-size-compact-loader-margin-bottom: var(--kbq-size-s);
-    --kbq-loader-overlay-size-compact-content-content-gap-vertical: var(--kbq-size-3xs);
+    --kbq-loader-overlay-size-compact-content-content-gap-vertical: var(--kbq-size-xxs);
     /* THEME TOKENS */
     --kbq-loader-overlay-transparent-overlay-background: var(--kbq-background-overlay-inverse);
     --kbq-loader-overlay-transparent-text-color: var(--kbq-foreground-contrast);

package/loader-overlay/loader-overlay.component.d.ts

@@ -1,4 +1,5 @@
 import { ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { KbqDefaultSizes } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare class KbqLoaderOverlayIndicator {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlayIndicator, never>;
@@ -17,7 +18,7 @@ export declare class KbqLoaderOverlay implements OnInit, OnDestroy {
     private renderer;
     text: string;
     caption: string;
-    compact: boolean;
+    size: KbqDefaultSizes;
     transparent: boolean;
     private parent;
     get isExternalIndicator(): boolean;
@@ -25,6 +26,10 @@ export declare class KbqLoaderOverlay implements OnInit, OnDestroy {
     get isExternalCaption(): boolean;
     get isEmpty(): boolean;
     get spinnerSize(): string;
+    /**
+     * @docs-private
+     */
+    protected get loaderSizeClass(): string;
     externalIndicator: KbqLoaderOverlayIndicator | null;
     externalText: KbqLoaderOverlayText | null;
     externalCaption: KbqLoaderOverlayCaption | null;
@@ -32,5 +37,5 @@ export declare class KbqLoaderOverlay implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlay, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqLoaderOverlay, "kbq-loader-overlay", never, { "text": { "alias": "text"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[kbq-loader-overlay-indicator]", "[kbq-loader-overlay-text]", "[kbq-loader-overlay-caption]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqLoaderOverlay, "kbq-loader-overlay", never, { "text": { "alias": "text"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "size": { "alias": "size"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[kbq-loader-overlay-indicator]", "[kbq-loader-overlay-text]", "[kbq-loader-overlay-caption]"], false, never>;
 }

package/loader-overlay/loader-overlay.scss

@@ -30,7 +30,7 @@
     // todo
     z-index: 10;
 
-    & .kbq-loader-overlay__container {
+    .kbq-loader-overlay__container {
         display: flex;
         flex-direction: column;
 
@@ -46,25 +46,39 @@
 
         padding-right: var(--kbq-loader-overlay-size-big-overlay-padding-horizontal);
 
-        & .kbq-progress-spinner {
+        .kbq-progress-spinner {
             margin-bottom: var(--kbq-loader-overlay-size-big-loader-margin-bottom);
         }
 
-        & .kbq-loader-overlay-text {
+        .kbq-loader-overlay-text {
             margin-bottom: var(--kbq-loader-overlay-size-big-content-content-gap-vertical);
         }
     }
 
+    &.kbq-loader-overlay_normal {
+        padding-left: var(--kbq-loader-overlay-size-normal-overlay-padding-horizontal);
+
+        padding-right: var(--kbq-loader-overlay-size-normal-overlay-padding-horizontal);
+
+        .kbq-progress-spinner {
+            margin-bottom: var(--kbq-loader-overlay-size-normal-loader-margin-bottom);
+        }
+
+        .kbq-loader-overlay-text {
+            margin-bottom: var(--kbq-loader-overlay-size-normal-content-content-gap-vertical);
+        }
+    }
+
     &.kbq-loader-overlay_compact {
         padding-left: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
 
         padding-right: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
 
-        & .kbq-progress-spinner {
+        .kbq-progress-spinner {
             margin-bottom: var(--kbq-loader-overlay-size-compact-loader-margin-bottom);
         }
 
-        & .kbq-loader-overlay-text {
+        .kbq-loader-overlay-text {
             margin-bottom: var(--kbq-loader-overlay-size-compact-content-content-gap-vertical);
         }
     }

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/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.20.0",
+    "version": "18.22.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,11 +24,11 @@
         "@angular/cdk": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@angular/forms": "^18.0.0",
-        "@koobiq/cdk": "18.20.0",
-        "@koobiq/angular-moment-adapter": "18.20.0",
-        "@koobiq/angular-luxon-adapter": "18.20.0",
+        "@koobiq/cdk": "18.22.0",
+        "@koobiq/angular-moment-adapter": "18.22.0",
+        "@koobiq/angular-luxon-adapter": "18.22.0",
         "@koobiq/date-formatter": "^3.2.3",
-        "@koobiq/icons": "^9.3.1",
+        "@koobiq/icons": "^9.4.0",
         "@koobiq/tokens-builder": "3.11.0",
         "@koobiq/design-tokens": "3.12.1",
         "@radix-ng/primitives": "^0.14.0"