@koobiq/components 18.13.0 → 18.15.0

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

@@ -0,0 +1,132 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Template context for the `KbqOverflowItemsResult` directive.
+ *
+ * @see `KbqOverflowItemsResult`
+ */
+export type KbqOverflowItemsResultContext = {
+    /**
+     * Set of hidden item ID's.
+     *
+     * Example:
+     *
+     * ```html
+     * <ng-template kbqOverflowItemsResult let-hiddenItemIDs>
+     *  {{ hiddenItemIDs.size }}
+     * </ng-template>
+     * ````
+     */
+    $implicit: ReadonlySet<unknown>;
+    /**
+     * Set of hidden item ID's.
+     *
+     * Example:
+     *
+     * ```html
+     * <ng-template kbqOverflowItemsResult let-hiddenItemIDs="hiddenItemIDs">
+     *  @if (hiddenItemIDs.has(SOME_ID)) {...}
+     * </ng-template>
+     * ````
+     */
+    hiddenItemIDs: ReadonlySet<unknown>;
+};
+/**
+ * Directive for providing `KbqOverflowItemsResultContext` to the `KbqOverflowItems` component.
+ *
+ * @see `KbqOverflowItemsResultContext`
+ */
+export declare class KbqOverflowItemsResult {
+    /**
+     * TemplateRef for the overflow result.
+     *
+     * @docs-private
+     */
+    readonly templateRef: TemplateRef<KbqOverflowItemsResultContext>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItemsResult, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItemsResult, "ng-template[kbqOverflowItemsResult]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Structure directive for providing items to the `KbqOverflowItems`.
+ */
+export declare class KbqOverflowItem {
+    /**
+     * Identifier for the item.
+     */
+    readonly id: import("@angular/core").InputSignal<unknown>;
+    /**
+     * Whether the item is hidden.
+     *
+     * @docs-private
+     */
+    readonly hidden: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * TemplateRef for the item.
+     *
+     * @docs-private
+     */
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItem, "[kbqOverflowItem]", never, { "id": { "alias": "kbqOverflowItem"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Component for automatically hiding elements with dynamic adaptation to the container width.
+ */
+export declare class KbqOverflowItems {
+    private readonly itemElementRefs;
+    /**
+     * `KbqOverflowItem` directive references.
+     *
+     * @docs-private
+     */
+    protected readonly items: import("@angular/core").Signal<readonly KbqOverflowItem[]>;
+    /**
+     * `KbqOverflowItemsResult` directive reference.
+     *
+     * @docs-private
+     */
+    protected readonly result: import("@angular/core").Signal<KbqOverflowItemsResult | undefined>;
+    private readonly resultElementRef;
+    /**
+     * Template context for the `KbqOverflowItemsResult` directive.
+     *
+     * @docs-private
+     */
+    protected readonly resultTemplateContext: import("@angular/core").Signal<KbqOverflowItemsResultContext>;
+    /**
+     * Whether the overflow result is hidden.
+     *
+     * @docs-private
+     */
+    protected readonly resultHidden: import("@angular/core").Signal<boolean>;
+    /**
+     * Whether the overflow order should be reversed.
+     * Also changes the position of the `resultTemplateRef`.
+     *
+     * @default false
+     */
+    readonly reverseOverflowOrder: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    private readonly elementRef;
+    private readonly resizeObserver;
+    private readonly contentObserver;
+    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.
+     */
+    private updateItemsVisibility;
+    /** @TODO Should use `Array.prototype.findLast` after migrating to ES2023 */
+    private findLast;
+    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>;
+}

package/overflow-items/overflow-items.scss

@@ -0,0 +1,20 @@
+:host {
+    position: relative;
+    display: flex;
+    flex-grow: 1;
+    overflow: hidden;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+}
+
+.kbq-overflow-items__item,
+.kbq-overflow-items__result {
+    display: flex;
+    align-items: center;
+
+    &.kbq-overflow-items__item_hidden,
+    &.kbq-overflow-items__result_hidden {
+        visibility: hidden;
+        position: absolute;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.13.0",
+    "version": "18.15.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.13.0",
-        "@koobiq/angular-moment-adapter": "18.13.0",
-        "@koobiq/angular-luxon-adapter": "18.13.0",
+        "@koobiq/cdk": "18.15.0",
+        "@koobiq/angular-moment-adapter": "18.15.0",
+        "@koobiq/angular-luxon-adapter": "18.15.0",
         "@koobiq/date-formatter": "^3.1.4",
         "@koobiq/icons": "^9.2.0",
         "@koobiq/tokens-builder": "3.10.0",
@@ -220,6 +220,12 @@
             "esm": "./esm2022/navbar/koobiq-components-navbar.mjs",
             "default": "./fesm2022/koobiq-components-navbar.mjs"
         },
+        "./overflow-items": {
+            "types": "./overflow-items/index.d.ts",
+            "esm2022": "./esm2022/overflow-items/koobiq-components-overflow-items.mjs",
+            "esm": "./esm2022/overflow-items/koobiq-components-overflow-items.mjs",
+            "default": "./fesm2022/koobiq-components-overflow-items.mjs"
+        },
         "./popover": {
             "types": "./popover/index.d.ts",
             "esm2022": "./esm2022/popover/koobiq-components-popover.mjs",

package/popover/popover.component.d.ts

@@ -75,6 +75,7 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     private _closeOnScroll;
     get hasClickTrigger(): boolean;
     backdropClass: string;
+    arrow: boolean;
     placementChange: EventEmitter<any>;
     visibleChange: EventEmitter<boolean>;
     protected originSelector: string;