@koobiq/components 19.4.1 → 19.6.0

package/modal/modal.component.d.ts

@@ -7,11 +7,7 @@ import { KbqModalControlService } from './modal-control.service';
 import { KbqModalRef } from './modal-ref.class';
 import { IModalButtonOptions, ModalOptions, ModalSize, ModalType, OnClickCallback } from './modal.type';
 import * as i0 from "@angular/core";
-/**
- * Duration when perform animations (ms)
- * @docs-private
- */
-export declare const MODAL_ANIMATE_DURATION = 200;
+type AnimationState = 'enter' | 'leave' | null;
 export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T, R> implements OnInit, OnChanges, AfterViewInit, OnDestroy, ModalOptions {
     private overlay;
     private renderer;
@@ -52,6 +48,8 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     kbqBodyStyle: object;
     readonly kbqAfterOpen: EventEmitter<void>;
     readonly kbqAfterClose: EventEmitter<R | undefined>;
+    /** Emitted before the modal begins its closing animation. */
+    readonly kbqBeforeClose: EventEmitter<R | undefined>;
     kbqOkText: string;
     kbqOkType: KbqComponentColors;
     kbqRestoreFocus: boolean;
@@ -70,10 +68,12 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     modalBody: ElementRef;
     isTopOverflow: boolean;
     isBottomOverflow: boolean;
-    maskAnimationClassMap: object;
-    modalAnimationClassMap: object;
+    maskAnimationClassMap: object | null;
+    modalAnimationClassMap: object | null;
     transformOrigin: string;
     get afterOpen(): Observable<void>;
+    /** Observable alias for `kbqBeforeClose` */
+    get beforeClose(): Observable<R | undefined>;
     get afterClose(): Observable<R | undefined>;
     get okText(): string;
     get cancelText(): string;
@@ -113,6 +113,11 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     isModalButtons(value: {}): boolean;
     getButtonCallableProp(options: IModalButtonOptions<T>, prop: string): {};
     onButtonClick(button: IModalButtonOptions<T>): void;
+    /**
+     * Sets mask animation classes for the given state, or clears them if state is null.
+     * @docs-private
+     */
+    animateMaskTo(state: AnimationState): void;
     private handleVisibleStateChange;
     private changeVisibleFromInside;
     private changeAnimationState;
@@ -131,5 +136,6 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
      */
     private changeBodyOverflow;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqModalComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalComponent<any, any>, "kbq-modal", never, { "kbqModalType": { "alias": "kbqModalType"; "required": false; }; "kbqComponent": { "alias": "kbqComponent"; "required": false; }; "kbqContent": { "alias": "kbqContent"; "required": false; }; "kbqComponentParams": { "alias": "kbqComponentParams"; "required": false; }; "kbqFooter": { "alias": "kbqFooter"; "required": false; }; "kbqVisible": { "alias": "kbqVisible"; "required": false; }; "kbqWidth": { "alias": "kbqWidth"; "required": false; }; "kbqSize": { "alias": "kbqSize"; "required": false; }; "kbqWrapClassName": { "alias": "kbqWrapClassName"; "required": false; }; "kbqClassName": { "alias": "kbqClassName"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "kbqTitle": { "alias": "kbqTitle"; "required": false; }; "kbqCloseByESC": { "alias": "kbqCloseByESC"; "required": false; }; "kbqClosable": { "alias": "kbqClosable"; "required": false; }; "kbqMask": { "alias": "kbqMask"; "required": false; }; "kbqMaskClosable": { "alias": "kbqMaskClosable"; "required": false; }; "kbqMaskStyle": { "alias": "kbqMaskStyle"; "required": false; }; "kbqBodyStyle": { "alias": "kbqBodyStyle"; "required": false; }; "kbqOkText": { "alias": "kbqOkText"; "required": false; }; "kbqOkType": { "alias": "kbqOkType"; "required": false; }; "kbqRestoreFocus": { "alias": "kbqRestoreFocus"; "required": false; }; "kbqOkLoading": { "alias": "kbqOkLoading"; "required": false; }; "kbqOnOk": { "alias": "kbqOnOk"; "required": false; }; "kbqCancelText": { "alias": "kbqCancelText"; "required": false; }; "kbqCancelLoading": { "alias": "kbqCancelLoading"; "required": false; }; "kbqOnCancel": { "alias": "kbqOnCancel"; "required": false; }; "kbqGetContainer": { "alias": "kbqGetContainer"; "required": false; }; }, { "kbqVisibleChange": "kbqVisibleChange"; "kbqAfterOpen": "kbqAfterOpen"; "kbqAfterClose": "kbqAfterClose"; "kbqOnOk": "kbqOnOk"; "kbqOnCancel": "kbqOnCancel"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqModalComponent<any, any>, "kbq-modal", never, { "kbqModalType": { "alias": "kbqModalType"; "required": false; }; "kbqComponent": { "alias": "kbqComponent"; "required": false; }; "kbqContent": { "alias": "kbqContent"; "required": false; }; "kbqComponentParams": { "alias": "kbqComponentParams"; "required": false; }; "kbqFooter": { "alias": "kbqFooter"; "required": false; }; "kbqVisible": { "alias": "kbqVisible"; "required": false; }; "kbqWidth": { "alias": "kbqWidth"; "required": false; }; "kbqSize": { "alias": "kbqSize"; "required": false; }; "kbqWrapClassName": { "alias": "kbqWrapClassName"; "required": false; }; "kbqClassName": { "alias": "kbqClassName"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "kbqTitle": { "alias": "kbqTitle"; "required": false; }; "kbqCloseByESC": { "alias": "kbqCloseByESC"; "required": false; }; "kbqClosable": { "alias": "kbqClosable"; "required": false; }; "kbqMask": { "alias": "kbqMask"; "required": false; }; "kbqMaskClosable": { "alias": "kbqMaskClosable"; "required": false; }; "kbqMaskStyle": { "alias": "kbqMaskStyle"; "required": false; }; "kbqBodyStyle": { "alias": "kbqBodyStyle"; "required": false; }; "kbqOkText": { "alias": "kbqOkText"; "required": false; }; "kbqOkType": { "alias": "kbqOkType"; "required": false; }; "kbqRestoreFocus": { "alias": "kbqRestoreFocus"; "required": false; }; "kbqOkLoading": { "alias": "kbqOkLoading"; "required": false; }; "kbqOnOk": { "alias": "kbqOnOk"; "required": false; }; "kbqCancelText": { "alias": "kbqCancelText"; "required": false; }; "kbqCancelLoading": { "alias": "kbqCancelLoading"; "required": false; }; "kbqOnCancel": { "alias": "kbqOnCancel"; "required": false; }; "kbqGetContainer": { "alias": "kbqGetContainer"; "required": false; }; }, { "kbqVisibleChange": "kbqVisibleChange"; "kbqAfterOpen": "kbqAfterOpen"; "kbqAfterClose": "kbqAfterClose"; "kbqBeforeClose": "kbqBeforeClose"; "kbqOnOk": "kbqOnOk"; "kbqOnCancel": "kbqOnCancel"; }, never, ["*"], true, never>;
 }
+export {};

package/modal/modal.scss

@@ -1,5 +1,6 @@
 @use '../core/styles/common/tokens' as *;
 @use './modal-confirm';
+@use './modal-animation';
 @use './modal-theme' as *;
 
 .kbq-modal-container {

package/modal/modal.type.d.ts

@@ -8,6 +8,11 @@ export declare enum ModalSize {
     Medium = "medium",
     Large = "large"
 }
+/**
+ * Duration when perform animations (ms)
+ * @docs-private
+ */
+export declare const MODAL_ANIMATE_DURATION = 300;
 export interface ModalOptions<C = any, R = any> {
     kbqModalType?: ModalType;
     kbqVisible?: boolean;

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

@@ -101,7 +101,9 @@ export declare class KbqNavbarItem extends KbqTooltipTrigger implements AfterCon
     private bento;
     title: KbqNavbarTitle;
     icon: KbqIcon;
-    collapsedText: string;
+    get collapsedText(): string;
+    set collapsedText(value: string);
+    private _collapsedText;
     get trigger(): string;
     set trigger(value: string);
     set collapsed(value: boolean);

package/navbar/navbar.scss

@@ -1,8 +1,11 @@
 @use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/overlay';
 
 @use './navbar-theme' as *;
 
 .kbq-navbar {
+    z-index: overlay.$overlay-z-index;
+
     display: flex;
     flex-direction: row;
     justify-content: space-between;

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

@@ -1,4 +1,4 @@
-import { KbqOrientation } from '@koobiq/components/core';
+import { KbqFlexWrap, KbqOrientation } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 /**
  * Manages the visibility of the element.
@@ -119,6 +119,12 @@ export declare class KbqOverflowItems {
      * @default 'horizontal'
      */
     readonly orientation: import("@angular/core").InputSignal<KbqOrientation>;
+    /**
+     * Defines the wrap of the overflow items.
+     *
+     * @default 'nowrap'
+     */
+    readonly wrap: import("@angular/core").InputSignal<KbqFlexWrap>;
     private readonly orientationConfig;
     constructor();
     private setupObservers;
@@ -142,5 +148,5 @@ export declare class KbqOverflowItems {
      */
     private findLast;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOverflowItems, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqOverflowItems, "[kbqOverflowItems]", ["kbqOverflowItems"], { "reverseOverflowOrder": { "alias": "reverseOverflowOrder"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "additionalResizeObserverTargets": { "alias": "additionalResizeObserverTargets"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "changes": "changes"; }, ["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; }; "additionalResizeObserverTargets": { "alias": "additionalResizeObserverTargets"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, { "changes": "changes"; }, ["items", "result"], never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "19.4.1",
+    "version": "19.6.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -25,12 +25,11 @@
         "@angular/cdk": "^19.0.0",
         "@angular/core": "^19.0.0",
         "@angular/forms": "^19.0.0",
-        "@koobiq/cdk": "19.4.1",
-        "@koobiq/angular-moment-adapter": "19.4.1",
-        "@koobiq/angular-luxon-adapter": "19.4.1",
+        "@koobiq/cdk": "19.6.0",
+        "@koobiq/angular-moment-adapter": "19.6.0",
+        "@koobiq/angular-luxon-adapter": "19.6.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^11.1.3",
-        "@koobiq/tokens-builder": "3.11.0",
         "@koobiq/design-tokens": "3.14.0"
     },
     "dependencies": {

package/popover/popover.component.d.ts

@@ -39,7 +39,11 @@ export declare const KBQ_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
 /** Creates an error to be thrown if the user supplied an invalid popover position. */
 export declare function getKbqPopoverInvalidPositionError(position: string): Error;
 export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> implements AfterContentInit, OnInit {
+    private overlayContainer;
+    private renderer;
     protected scrollStrategy: () => ScrollStrategy;
+    /** Controls whether the component should be hidden when it is not visible in the viewport. */
+    readonly hideIfNotInViewPort: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /** prevents closure by any event */
     preventClose: boolean;
     /** disables default padding for all popover elements (header, content and footer) */
@@ -105,8 +109,15 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     readonly visibleChange: EventEmitter<boolean>;
     protected originSelector: string;
     protected get overlayConfig(): OverlayConfig;
+    private classAddedToOverlayContainer;
     ngOnInit(): void;
     ngAfterContentInit(): void;
+    /**
+     * Overrides the base `show` method to display the overlay component with the
+     * specified entry delay and apply default positioning offsets.
+     */
+    show(delay?: number): void;
+    hide(delay?: number): void;
     updateData(): void;
     /** Updates the position of the current popover. */
     updatePosition(reapplyPosition?: boolean): void;
@@ -115,9 +126,11 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     closingActionsForClick(): import("rxjs").Observable<MouseEvent>[];
     defaultClosingActions(): import("rxjs").Observable<MouseEvent>[];
     closingActions(): import("rxjs").Observable<void | CdkScrollable | MouseEvent>;
-    private hideIfNotInViewPort;
+    private hideIfScrolledOutOfView;
+    private addClassToOverlayContainer;
+    private removeClassFromOverlayContainer;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopoverTrigger, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "preventClose": { "alias": "kbqPopoverPreventClose"; "required": false; }; "defaultPaddings": { "alias": "defaultPaddings"; "required": false; }; "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "stickToWindow": { "alias": "kbqPopoverStickToWindow"; "required": false; }; "container": { "alias": "container"; "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; }; "context": { "alias": "kbqPopoverContext"; "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; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "hideIfNotInViewPort": { "alias": "hideIfNotInViewPort"; "required": false; "isSignal": true; }; "preventClose": { "alias": "kbqPopoverPreventClose"; "required": false; }; "defaultPaddings": { "alias": "defaultPaddings"; "required": false; }; "popoverVisible": { "alias": "kbqPopoverVisible"; "required": false; }; "popoverPlacement": { "alias": "kbqPopoverPlacement"; "required": false; }; "popoverPlacementPriority": { "alias": "kbqPopoverPlacementPriority"; "required": false; }; "stickToWindow": { "alias": "kbqPopoverStickToWindow"; "required": false; }; "container": { "alias": "container"; "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; }; "context": { "alias": "kbqPopoverContext"; "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; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, true, never>;
     static ngAcceptInputType_preventClose: unknown;
     static ngAcceptInputType_defaultPaddings: unknown;
     static ngAcceptInputType_arrow: unknown;