@koobiq/components 18.17.0 → 18.19.0

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

@@ -1,132 +1,118 @@
-import { TemplateRef } from '@angular/core';
+import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
- * Template context for the `KbqOverflowItemsResult` directive.
+ * Manages the visibility of the element.
  *
- * @see `KbqOverflowItemsResult`
+ * @docs-private
  */
-export type KbqOverflowItemsResultContext = {
+export declare class ElementVisibilityManager {
+    private readonly renderer;
     /**
-     * Set of hidden item ID's.
+     * Reference to the element.
      *
-     * Example:
-     *
-     * ```html
-     * <ng-template kbqOverflowItemsResult let-hiddenItemIDs>
-     *  {{ hiddenItemIDs.size }}
-     * </ng-template>
-     * ````
+     * @docs-private
      */
-    $implicit: ReadonlySet<unknown>;
+    readonly elementRef: ElementRef<any>;
     /**
-     * Set of hidden item ID's.
+     * Whether the element is hidden.
      *
-     * Example:
+     * @docs-private
+     */
+    readonly hidden: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * Hides the element.
      *
-     * ```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 {
+     * @docs-private
+     */
+    hide(): void;
     /**
-     * TemplateRef for the overflow result.
+     * Shows the element.
      *
      * @docs-private
      */
-    readonly templateRef: TemplateRef<KbqOverflowItemsResultContext>;
+    show(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElementVisibilityManager, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElementVisibilityManager, never, never, {}, {}, never, never, false, never>;
+}
+/**
+ * Directive for displaying the result of hidden items by the `KbqOverflowItems` directive.
+ */
+export declare class KbqOverflowItemsResult extends ElementVisibilityManager {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItemsResult, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItemsResult, "ng-template[kbqOverflowItemsResult]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItemsResult, "[kbqOverflowItemsResult]", ["kbqOverflowItemsResult"], {}, {}, never, never, true, never>;
 }
 /**
- * Structure directive for providing items to the `KbqOverflowItems`.
+ * Directive for the item that can be hidden by the `KbqOverflowItems` directive.
  */
-export declare class KbqOverflowItem {
+export declare class KbqOverflowItem extends ElementVisibilityManager {
     /**
-     * Identifier for the item.
+     * Unique 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>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItem, "[kbqOverflowItem]", ["kbqOverflowItem"], { "id": { "alias": "kbqOverflowItem"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /**
- * Component for automatically hiding elements with dynamic adaptation to the container width.
+ * Directive for managing the visibility of items that overflow the container.
  */
 export declare class KbqOverflowItems {
-    private readonly itemElementRefs;
     /**
      * `KbqOverflowItem` directive references.
      *
      * @docs-private
      */
-    protected readonly items: import("@angular/core").Signal<readonly KbqOverflowItem[]>;
+    private readonly items;
     /**
      * `KbqOverflowItemsResult` directive reference.
      *
      * @docs-private
      */
-    protected readonly result: import("@angular/core").Signal<KbqOverflowItemsResult | undefined>;
-    private readonly resultElementRef;
+    private readonly result;
     /**
-     * Template context for the `KbqOverflowItemsResult` directive.
+     * Whether the overflow order should be reversed.
      *
-     * @docs-private
+     * @default false
      */
-    protected readonly resultTemplateContext: import("@angular/core").Signal<KbqOverflowItemsResultContext>;
+    readonly reverseOverflowOrder: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**
-     * Whether the overflow result is hidden.
+     * Debounce time for recalculating items visibility.
      *
-     * @docs-private
+     * @default 100
      */
-    protected readonly resultHidden: import("@angular/core").Signal<boolean>;
+    readonly debounceTime: import("@angular/core").InputSignalWithTransform<number, unknown>;
     /**
-     * Whether the overflow order should be reversed.
-     * Also changes the position of the `resultTemplateRef`.
-     *
-     * @default false
+     * Emits when the set of hidden items changes.
      */
-    readonly reverseOverflowOrder: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly changes: import("@angular/core").OutputEmitterRef<ReadonlySet<unknown>>;
+    /**
+     * Set of hidden item IDs.
+     */
+    readonly hiddenItemIDs: import("@angular/core").Signal<ReadonlySet<unknown>>;
     private readonly elementRef;
     private readonly resizeObserver;
-    private readonly contentObserver;
+    private readonly renderer;
+    private readonly document;
     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;
+     * Calculates the visibility of items, based on the container width and `reverseOverflowOrder` property.
+     */
+    private calculateItemsVisibility;
+    /**
+     * Returns the width of the element including margins.
+     */
+    private getElementWidthWithMargins;
+    /**
+     * This method sets the necessary styles for the directive.
+     */
+    private setStyles;
+    /**
+     * Determines if the given item is hidden.
+     */
+    private isHiddenItem;
+    /**
+     * Returns the window object.
+     */
+    private getWindow;
     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 ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItems, "[kbqOverflowItems]", ["kbqOverflowItems"], { "reverseOverflowOrder": { "alias": "reverseOverflowOrder"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; }, { "changes": "changes"; }, ["items", "result"], never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.17.0",
+    "version": "18.19.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.17.0",
-        "@koobiq/angular-moment-adapter": "18.17.0",
-        "@koobiq/angular-luxon-adapter": "18.17.0",
-        "@koobiq/date-formatter": "^3.1.4",
-        "@koobiq/icons": "^9.2.0",
+        "@koobiq/cdk": "18.19.0",
+        "@koobiq/angular-moment-adapter": "18.19.0",
+        "@koobiq/angular-luxon-adapter": "18.19.0",
+        "@koobiq/date-formatter": "^3.2.3",
+        "@koobiq/icons": "^9.3.0",
         "@koobiq/tokens-builder": "3.11.0",
         "@koobiq/design-tokens": "3.11.2",
         "@radix-ng/primitives": "^0.14.0"
@@ -70,6 +70,12 @@
             "esm": "./esm2022/accordion/koobiq-components-accordion.mjs",
             "default": "./fesm2022/koobiq-components-accordion.mjs"
         },
+        "./actions-panel": {
+            "types": "./actions-panel/index.d.ts",
+            "esm2022": "./esm2022/actions-panel/koobiq-components-actions-panel.mjs",
+            "esm": "./esm2022/actions-panel/koobiq-components-actions-panel.mjs",
+            "default": "./fesm2022/koobiq-components-actions-panel.mjs"
+        },
         "./alert": {
             "types": "./alert/index.d.ts",
             "esm2022": "./esm2022/alert/koobiq-components-alert.mjs",
@@ -166,6 +172,12 @@
             "esm": "./esm2022/file-upload/koobiq-components-file-upload.mjs",
             "default": "./fesm2022/koobiq-components-file-upload.mjs"
         },
+        "./filter-bar": {
+            "types": "./filter-bar/index.d.ts",
+            "esm2022": "./esm2022/filter-bar/koobiq-components-filter-bar.mjs",
+            "esm": "./esm2022/filter-bar/koobiq-components-filter-bar.mjs",
+            "default": "./fesm2022/koobiq-components-filter-bar.mjs"
+        },
         "./form-field": {
             "types": "./form-field/index.d.ts",
             "esm2022": "./esm2022/form-field/koobiq-components-form-field.mjs",

package/popover/popover.component.d.ts

@@ -11,6 +11,7 @@ export declare class KbqPopoverComponent extends KbqPopUp implements AfterViewIn
     isTrapFocus: boolean;
     hasCloseButton: boolean;
     popoverContent: ElementRef<HTMLDivElement>;
+    elementRef: ElementRef;
     cdkTrapFocus: CdkTrapFocus;
     private debounceTime;
     private readonly destroyRef;
@@ -80,6 +81,7 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     get hasClickTrigger(): boolean;
     backdropClass: string;
     arrow: boolean;
+    offset: number | null;
     placementChange: EventEmitter<any>;
     visibleChange: EventEmitter<boolean>;
     protected originSelector: string;
@@ -91,7 +93,10 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     getOverlayHandleComponentType(): Type<KbqPopoverComponent>;
     updateClassMap(newPlacement?: string): void;
     closingActionsForClick(): import("rxjs").Observable<MouseEvent>[];
+    defaultClosingActions(): import("rxjs").Observable<MouseEvent>[];
     closingActions(): import("rxjs").Observable<void | MouseEvent | CdkScrollable>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; }; "header": { "alias": "kbqPopoverHeader"; "required": false; }; "content": { "alias": "kbqPopoverContent"; "required": false; }; "footer": { "alias": "kbqPopoverFooter"; "required": false; }; "disabled": { "alias": "kbqPopoverDisabled"; "required": false; }; "trigger": { "alias": "kbqTrigger"; "required": false; }; "size": { "alias": "kbqPopoverSize"; "required": false; }; "customClass": { "alias": "kbqPopoverClass"; "required": false; }; "hasCloseButton": { "alias": "hasCloseButton"; "required": false; }; "closeOnScroll": { "alias": "closeOnScroll"; "required": false; }; "backdropClass": { "alias": "backdropClass"; "required": false; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
+    static ngAcceptInputType_arrow: unknown;
+    static ngAcceptInputType_offset: unknown;
 }

package/schematics/ng-add/index.js

@@ -27,11 +27,11 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.6");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.17.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.17.0");
-        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/icons', "^9.2.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.19.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.19.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.2.3");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.2.3");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.3.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.11.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.11.2");
         utils_packageConfig.addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");

package/select/_select-theme.scss

@@ -8,17 +8,25 @@
 
         &.ng-invalid {
             color: var(--kbq-error-default);
+
+            .kbq-select__placeholder {
+                color: var(--kbq-form-field-states-error-placeholder);
+            }
         }
 
         &.kbq-disabled {
             color: var(--kbq-states-foreground-disabled);
+
+            .kbq-select__placeholder {
+                color: var(--kbq-form-field-states-disabled-placeholder);
+            }
         }
     }
 
     .kbq-select__placeholder {
         text-overflow: ellipsis;
 
-        color: var(--kbq-states-foreground-disabled);
+        color: var(--kbq-form-field-default-placeholder);
     }
 
     .kbq-select__panel {

package/textarea/textarea.component.d.ts

@@ -1,4 +1,4 @@
-import { DoCheck, ElementRef, InjectionToken, NgZone, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { DoCheck, ElementRef, InjectionToken, NgZone, OnChanges, OnDestroy, OnInit, Renderer2 } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher } from '@koobiq/components/core';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
@@ -28,6 +28,7 @@ export declare class KbqTextarea extends KbqTextareaMixinBase implements KbqForm
     private parent;
     private ngZone;
     protected readonly isBrowser: boolean;
+    protected readonly renderer: Renderer2;
     canGrow: boolean;
     /** An object used to control when error messages are shown. */
     errorStateMatcher: ErrorStateMatcher;

package/title/title.directive.d.ts

@@ -6,6 +6,8 @@ import * as i0 from "@angular/core";
 export declare class KbqTitleDirective extends KbqTooltipTrigger implements AfterViewInit, OnDestroy {
     private componentInstance?;
     private contentObserver;
+    set trigger(value: string);
+    get trigger(): string;
     get isOverflown(): boolean;
     get viewValue(): string;
     get parent(): HTMLElement;

package/tree-select/_tree-select-theme.scss

@@ -6,17 +6,25 @@
 
         &.ng-invalid {
             color: var(--kbq-error-default);
+
+            .kbq-select__placeholder {
+                color: var(--kbq-form-field-states-error-placeholder);
+            }
         }
 
         &.kbq-disabled {
             color: var(--kbq-states-foreground-disabled);
+
+            .kbq-select__placeholder {
+                color: var(--kbq-form-field-states-disabled-placeholder);
+            }
         }
     }
 
     .kbq-select__placeholder {
         text-overflow: ellipsis;
 
-        color: var(--kbq-states-foreground-disabled);
+        color: var(--kbq-form-field-default-placeholder);
     }
 
     .kbq-tree-select__panel {

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 {};