@koobiq/components 18.16.1 → 18.18.0

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

@@ -59,7 +59,7 @@ export declare class KbqOverflowItem {
      *
      * @docs-private
      */
-    readonly hidden: import("@angular/core").WritableSignal<boolean>;
+    hidden: boolean;
     /**
      * TemplateRef for the item.
      *
@@ -93,6 +93,7 @@ export declare class KbqOverflowItems {
      * @docs-private
      */
     protected readonly resultTemplateContext: import("@angular/core").Signal<KbqOverflowItemsResultContext>;
+    private readonly hiddenItemIDs;
     /**
      * Whether the overflow result is hidden.
      *
@@ -106,27 +107,24 @@ export declare class KbqOverflowItems {
      * @default false
      */
     readonly reverseOverflowOrder: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Debounce time for recalculating items visibility.
+     *
+     * @default 100
+     */
+    readonly debounceTime: import("@angular/core").InputSignalWithTransform<number, unknown>;
     private readonly elementRef;
     private readonly resizeObserver;
-    private readonly contentObserver;
+    private readonly changeDetectorRef;
     constructor();
     /**
-     * Updates the visibility of items based on the container width.
-     *
-     * This method calculates whether items should be hidden or shown by comparing the scroll width of the container
-     * with its visible width. It determines which items are visible and which are hidden, and applies the hiding logic
-     * based on the `reverseOverflowOrder` flag.
-     *
-     * The function operates recursively to adjust the visibility of items until the overflow condition is resolved.
-     *
-     * - If the container is overflown, it hides the last visible item from the end (or start if `reverseOverflowOrder`)
-     * and checks if further adjustments are needed.
-     * - If the container is not overflown, it reveals the first hidden item from the start
-     * (or end if `reverseOverflowOrder`), ensuring it fits within the visible area.
+     * Updates items visibility, based on the container width and the `reverseOverflowOrder` flag.
      */
     private updateItemsVisibility;
-    /** @TODO Should use `Array.prototype.findLast` after migrating to ES2023 */
-    private findLast;
+    /**
+     * Determines if the given item is hidden.
+     */
+    private isHiddenItem;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItems, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOverflowItems, "kbq-overflow-items", never, { "reverseOverflowOrder": { "alias": "reverseOverflowOrder"; "required": false; "isSignal": true; }; }, {}, ["items", "result"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOverflowItems, "kbq-overflow-items", never, { "reverseOverflowOrder": { "alias": "reverseOverflowOrder"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; }, {}, ["items", "result"], never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.16.1",
+    "version": "18.18.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.16.1",
-        "@koobiq/angular-moment-adapter": "18.16.1",
-        "@koobiq/angular-luxon-adapter": "18.16.1",
+        "@koobiq/cdk": "18.18.0",
+        "@koobiq/angular-moment-adapter": "18.18.0",
+        "@koobiq/angular-luxon-adapter": "18.18.0",
         "@koobiq/date-formatter": "^3.1.4",
         "@koobiq/icons": "^9.2.0",
         "@koobiq/tokens-builder": "3.11.0",
@@ -346,6 +346,12 @@
             "esm": "./esm2022/tooltip/koobiq-components-tooltip.mjs",
             "default": "./fesm2022/koobiq-components-tooltip.mjs"
         },
+        "./top-bar": {
+            "types": "./top-bar/index.d.ts",
+            "esm2022": "./esm2022/top-bar/koobiq-components-top-bar.mjs",
+            "esm": "./esm2022/top-bar/koobiq-components-top-bar.mjs",
+            "default": "./fesm2022/koobiq-components-top-bar.mjs"
+        },
         "./tree": {
             "types": "./tree/index.d.ts",
             "esm2022": "./esm2022/tree/koobiq-components-tree.mjs",

package/schematics/ng-add/index.js

@@ -27,10 +27,10 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.6");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.16.1");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.16.1");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.2.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.2.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.18.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.18.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.2.1");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.2.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.2.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.11.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.11.2");

package/top-bar/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/top-bar/module.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./top-bar";
+export declare class KbqTopBarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqTopBarModule, never, [typeof i1.KbqTopBar, typeof i1.KbqTopBarContainer, typeof i1.KbqTopBarSpacer], [typeof i1.KbqTopBar, typeof i1.KbqTopBarContainer, typeof i1.KbqTopBarSpacer]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqTopBarModule>;
+}

package/top-bar/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './module';
+export * from './top-bar';

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

@@ -0,0 +1,12 @@
+.kbq-top-bar {
+    --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-border-radius: 0;
+    --kbq-top-bar-left-gap: 0;
+    --kbq-top-bar-right-gap: var(--kbq-size-s);
+    --kbq-top-bar-shadow-bottom: var(--kbq-shadow-overflow-normal-bottom);
+    --kbq-top-bar-shadow-transition: ease-out 300ms;
+}

package/top-bar/top-bar.d.ts

@@ -0,0 +1,25 @@
+import * as i0 from "@angular/core";
+export declare class KbqTopBarSpacer {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBarSpacer, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTopBarSpacer, "[kbqTopBarSpacer]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive that dynamically applying CSS classes based on a placement value (left or right).
+ */
+export declare class KbqTopBarContainer {
+    /**
+     * Conditionally applies a CSS class based on the value
+     */
+    placement: import("@angular/core").InputSignal<"start" | "end">;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBarContainer, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqTopBarContainer, "[kbqTopBarContainer]", never, { "placement": { "alias": "placement"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export declare class KbqTopBar {
+    /**
+     * Enables overflow behavior, applying `kbq-top-bar-overflow` to show a bottom shadow.
+     */
+    withShadow: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqTopBar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTopBar, "kbq-top-bar", never, { "withShadow": { "alias": "withShadow"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_withShadow: unknown;
+}

package/top-bar/top-bar.scss

@@ -0,0 +1,36 @@
+@use '../core/styles/common/tokens';
+
+.kbq-top-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: row;
+    box-sizing: border-box;
+
+    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);
+
+    .kbq-top-bar-spacer {
+        height: 100%;
+        flex: 1 0 var(--kbq-top-bar-spacer-min-width);
+    }
+
+    .kbq-top-bar-container__start {
+        display: flex;
+        gap: var(--kbq-top-bar-left-gap);
+    }
+
+    .kbq-top-bar-container__end {
+        display: flex;
+        gap: var(--kbq-top-bar-right-gap);
+    }
+
+    &.kbq-top-bar_with-shadow {
+        box-shadow: var(--kbq-top-bar-shadow-bottom);
+        transition: box-shadow var(--kbq-top-bar-shadow-transition);
+    }
+
+    @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
+}

package/tree-select/tree-select.component.d.ts

@@ -297,6 +297,6 @@ export declare class KbqTreeSelect extends KbqTreeSelectMixinBase implements Aft
     private scrollActiveOptionIntoView;
     private subscribeOnSearchChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqTreeSelect, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; host: true; }, { optional: true; self: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqTreeSelect, "kbq-tree-select", ["kbqTreeSelect"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "hiddenItemsText": { "alias": "hiddenItemsText"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "sortComparator": { "alias": "sortComparator"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "id": { "alias": "id"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "hiddenItemsTextFormatter": { "alias": "hiddenItemsTextFormatter"; "required": false; }; }, { "openedChange": "openedChange"; "openedStream": "opened"; "closedStream": "closed"; "selectionChange": "selectionChange"; "valueChange": "valueChange"; }, ["cleaner", "customTrigger", "customMatcher", "customTagTemplateRef", "tree", "search"], ["kbq-select-matcher, [kbq-select-matcher]", "kbq-select-trigger, [kbq-select-trigger]", "kbq-cleaner", "[kbqSelectSearch]", "[kbq-select-search-empty-result]", "kbq-tree-selection", "kbq-select-footer,[kbq-tree-select-footer]"], false, never>;
 }
 export {};