@koobiq/components 18.33.0 → 18.35.0

package/navbar-ic/navbar-ic-item.scss

@@ -0,0 +1,96 @@
+.kbq-navbar-ic-item {
+    box-sizing: border-box;
+
+    display: flex;
+
+    padding: var(--kbq-size-3xs) var(--kbq-size-m);
+
+    & .kbq-icon {
+        min-width: var(--kbq-size-l);
+        min-height: var(--kbq-size-l);
+    }
+
+    & .kbq-navbar-ic-item__title-container {
+        gap: var(--kbq-size-m);
+    }
+
+    &.kbq-collapsed {
+        & .kbq-badge {
+            position: absolute;
+
+            z-index: 1;
+
+            top: 0;
+            right: 0;
+        }
+
+        & .kbq-navbar-ic-item__title-container {
+            display: none;
+        }
+    }
+
+    & > .kbq-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+.kbq-navbar-ic-item__inner {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    height: 36px;
+    width: 100%;
+    max-width: calc(100% - var(--kbq-size-xxl));
+
+    gap: var(--kbq-size-m);
+
+    padding-left: var(--kbq-size-m);
+    padding-right: var(--kbq-size-m);
+
+    border-radius: var(--kbq-navbar-ic-item-size-content-border-radius);
+}
+
+.kbq-navbar-ic-title {
+    display: inline-block;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.kbq-navbar-ic-item__title-container {
+    display: flex;
+    flex-direction: row;
+
+    flex: 1 1 auto;
+    justify-content: space-between;
+
+    min-width: 0;
+
+    & .kbq-icon {
+        align-self: center;
+    }
+}
+
+a.kbq-navbar-ic-item,
+a.kbq-navbar-ic-title {
+    text-decoration: none;
+}
+
+.kbq-navbar-ic-item,
+.kbq-navbar-ic-header,
+.kbq-navbar-ic-toggle {
+    & [kbq-button] {
+        z-index: 1;
+    }
+}
+
+.kbq-navbar-ic-toggle .kbq-navbar-ic-item__inner {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}

package/navbar-ic/navbar-ic-tokens.scss

@@ -0,0 +1,22 @@
+.kbq-navbar-ic {
+    --kbq-navbar-ic-item-size-content-border-radius: var(--kbq-size-border-radius);
+    /* THEME TOKENS */
+    --kbq-navbar-ic-background: var(--kbq-background-bg);
+    --kbq-navbar-ic-border: var(--kbq-shadow-overflow-compact-right);
+    --kbq-navbar-ic-item-default-content-text: var(--kbq-foreground-contrast);
+    --kbq-navbar-ic-item-default-content-background: transparent;
+    --kbq-navbar-ic-item-default-content-icon-left: var(--kbq-icon-contrast);
+    --kbq-navbar-ic-item-default-content-icon-right: var(--kbq-icon-contrast);
+    --kbq-navbar-ic-item-states-hover-content-text: var(--kbq-foreground-contrast);
+    --kbq-navbar-ic-item-states-hover-content-background: var(--kbq-states-background-transparent-hover);
+    --kbq-navbar-ic-item-states-hover-content-icon-left: var(--kbq-states-icon-contrast-hover);
+    --kbq-navbar-ic-item-states-hover-content-icon-right: var(--kbq-states-icon-contrast-hover);
+    --kbq-navbar-ic-item-states-selected-content-text: var(--kbq-foreground-contrast);
+    --kbq-navbar-ic-item-states-selected-content-background: var(--kbq-states-background-transparent-active);
+    --kbq-navbar-ic-item-states-selected-content-icon-left: var(--kbq-states-icon-contrast-active);
+    --kbq-navbar-ic-item-states-selected-content-icon-right: var(--kbq-states-icon-contrast-active);
+    --kbq-navbar-ic-item-states-disabled-content-text: var(--kbq-states-foreground-disabled);
+    --kbq-navbar-ic-item-states-disabled-content-background: transparent;
+    --kbq-navbar-ic-item-states-disabled-content-icon-left: var(--kbq-states-icon-disabled);
+    --kbq-navbar-ic-item-states-disabled-content-icon-right: var(--kbq-states-icon-disabled);
+}

package/navbar-ic/navbar-ic.animation.d.ts

@@ -0,0 +1,2 @@
+import { AnimationTriggerMetadata } from '@angular/animations';
+export declare function toggleNavbarIcAnimation(): AnimationTriggerMetadata;

package/navbar-ic/navbar-ic.d.ts

@@ -0,0 +1,103 @@
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DestroyRef, ElementRef, InjectionToken, OnDestroy, QueryList } from '@angular/core';
+import { FocusKeyManager } from '@koobiq/cdk/a11y';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { KbqNavbarFocusableItemEvent, KbqNavbarIcFocusableItem, KbqNavbarIcItem } from './navbar-ic-item';
+import * as i0 from "@angular/core";
+export declare enum KbqExpandEvents {
+    toggle = 0,
+    hoverOrFocus = 1
+}
+/** default configuration of navbar-ic */
+/** @docs-private */
+export declare const KBQ_NAVBAR_IC_DEFAULT_CONFIGURATION: {
+    toggle: {
+        pinButton: string;
+        collapseButton: string;
+    };
+};
+/** Injection Token for providing configuration of navbar-ic */
+/** @docs-private */
+export declare const KBQ_NAVBAR_IC_CONFIGURATION: InjectionToken<unknown>;
+export declare class KbqFocusable implements AfterContentInit, AfterViewInit, OnDestroy {
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    protected readonly elementRef: ElementRef<any>;
+    protected readonly destroyRef: DestroyRef;
+    protected readonly focusMonitor: FocusMonitor;
+    focusableItems: QueryList<KbqNavbarIcFocusableItem>;
+    keyManager: FocusKeyManager<KbqNavbarIcFocusableItem>;
+    get tabindex(): number;
+    set tabindex(value: number);
+    private _tabindex;
+    get itemFocusChanges(): Observable<KbqNavbarFocusableItemEvent>;
+    get itemBlurChanges(): Observable<KbqNavbarFocusableItemEvent>;
+    private itemFocusSubscription;
+    private itemBlurSubscription;
+    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** @docs-private */
+    focusHandler(): void;
+    /** @docs-private */
+    blurHandler(): void;
+    protected resetOptions(): void;
+    protected dropSubscriptions(): void;
+    protected listenToItemsFocus(): void;
+    protected updateTabIndex(): void;
+    protected isValidIndex(index: number): boolean;
+    protected hasFocusedItem(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqFocusable, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFocusable, never, never, { "tabindex": { "alias": "tabindex"; "required": false; }; }, {}, ["focusableItems"], never, false, never>;
+    static ngAcceptInputType_tabindex: unknown;
+}
+export declare class KbqNavbarIcContainer {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarIcContainer, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarIcContainer, "kbq-navbar-ic-container", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqNavbarIc extends KbqFocusable implements AfterContentInit {
+    /** @docs-private */
+    protected readonly localeService: import("@koobiq/components/core").KbqLocaleService | null;
+    readonly externalConfiguration: unknown;
+    configuration: any;
+    /** @docs-private */
+    rectangleElements: import("@angular/core").Signal<readonly any[]>;
+    /** @docs-private */
+    items: import("@angular/core").Signal<readonly any[]>;
+    /** @docs-private */
+    toggleElement: import("@angular/core").Signal<readonly any[]>;
+    /** @docs-private */
+    dropdownTrigger: import("@angular/core").Signal<readonly any[]>;
+    /** @docs-private */
+    popoverTrigger: import("@angular/core").Signal<readonly any[]>;
+    readonly hovered: BehaviorSubject<boolean>;
+    readonly focused: BehaviorSubject<boolean>;
+    readonly animationDone: Subject<void>;
+    expandEvent: KbqExpandEvents | null;
+    pinned: boolean;
+    collapsedWidth: number;
+    expandedWidth: number;
+    get expanded(): boolean;
+    set expanded(value: boolean);
+    private _expanded;
+    get hasOpenedPopUp(): boolean;
+    get expandedByToggle(): boolean;
+    get expandedByHoverOrFocus(): boolean;
+    get currentWidth(): number;
+    constructor();
+    /** @docs-private */
+    ngAfterContentInit(): void;
+    toggle(): void;
+    /** @docs-private */
+    onKeyDown(event: KeyboardEvent): void;
+    protected updateTooltipForItems: () => void;
+    protected updateExpandedStateForItems: () => void;
+    protected updateItemExpandedState: (item: KbqNavbarIcItem) => void;
+    private updateLocaleParams;
+    private initDefaultParams;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarIc, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarIc, "kbq-navbar-ic", ["KbqNavbarIc"], { "pinned": { "alias": "pinned"; "required": false; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; }; "expandedWidth": { "alias": "expandedWidth"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; }, {}, ["rectangleElements", "items", "toggleElement", "dropdownTrigger", "popoverTrigger"], ["[kbq-navbar-ic-container], kbq-navbar-ic-container", "[kbq-navbar-ic-toggle], kbq-navbar-ic-toggle"], true, never>;
+    static ngAcceptInputType_pinned: unknown;
+    static ngAcceptInputType_collapsedWidth: unknown;
+    static ngAcceptInputType_expandedWidth: unknown;
+    static ngAcceptInputType_expanded: unknown;
+}

package/navbar-ic/navbar-ic.module.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/a11y";
+import * as i2 from "@angular/cdk/platform";
+import * as i3 from "@koobiq/components/icon";
+import * as i4 from "@koobiq/components/tooltip";
+import * as i5 from "./navbar-ic";
+import * as i6 from "./navbar-ic-item";
+import * as i7 from "./navbar-ic-header";
+import * as i8 from "@koobiq/components/core";
+export declare class KbqNavbarIcModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarIcModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqNavbarIcModule, never, [typeof i1.A11yModule, typeof i2.PlatformModule, typeof i3.KbqIconModule, typeof i4.KbqToolTipModule, typeof i5.KbqNavbarIc, typeof i6.KbqNavbarIcTitle, typeof i6.KbqNavbarIcItem, typeof i7.KbqNavbarIcHeader, typeof i6.KbqNavbarIcLogo, typeof i6.KbqNavbarIcToggle, typeof i6.KbqNavbarIcDivider, typeof i6.KbqNavbarIcFocusableItem, typeof i5.KbqNavbarIcContainer, typeof i8.KbqRectangleItem], [typeof i5.KbqNavbarIc, typeof i5.KbqNavbarIcContainer, typeof i6.KbqNavbarIcTitle, typeof i6.KbqNavbarIcItem, typeof i7.KbqNavbarIcHeader, typeof i6.KbqNavbarIcLogo, typeof i6.KbqNavbarIcToggle, typeof i6.KbqNavbarIcDivider, typeof i6.KbqNavbarIcFocusableItem]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqNavbarIcModule>;
+}

package/navbar-ic/navbar-ic.scss

@@ -0,0 +1,32 @@
+@use './navbar-ic-theme';
+
+.kbq-navbar-ic-container {
+    display: flex;
+
+    flex-shrink: 0;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.kbq-navbar-ic {
+    display: flex;
+    position: relative;
+
+    & .kbq-navbar-ic-container + .kbq-navbar-ic-container {
+        padding-top: var(--kbq-size-xxl);
+        padding-bottom: var(--kbq-size-m);
+    }
+
+    & .kbq-navbar-ic__top-layer {
+        position: absolute;
+        z-index: 998;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-height: 100%;
+    }
+}
+
+@include navbar-ic-theme.kbq-navbar-ic-theme();
+@include navbar-ic-theme.kbq-navbar-ic-typography();

package/navbar-ic/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from './navbar-ic';
+export * from './navbar-ic-header';
+export * from './navbar-ic-item';
+export * from './navbar-ic.module';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.33.0",
+    "version": "18.35.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.33.0",
-        "@koobiq/angular-moment-adapter": "18.33.0",
-        "@koobiq/angular-luxon-adapter": "18.33.0",
+        "@koobiq/cdk": "18.35.0",
+        "@koobiq/angular-moment-adapter": "18.35.0",
+        "@koobiq/angular-luxon-adapter": "18.35.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^10.4.0",
         "@koobiq/tokens-builder": "3.11.0",
@@ -118,12 +118,24 @@
             "esm": "./esm2022/checkbox/koobiq-components-checkbox.mjs",
             "default": "./fesm2022/koobiq-components-checkbox.mjs"
         },
+        "./clamped-text": {
+            "types": "./clamped-text/index.d.ts",
+            "esm2022": "./esm2022/clamped-text/koobiq-components-clamped-text.mjs",
+            "esm": "./esm2022/clamped-text/koobiq-components-clamped-text.mjs",
+            "default": "./fesm2022/koobiq-components-clamped-text.mjs"
+        },
         "./code-block": {
             "types": "./code-block/index.d.ts",
             "esm2022": "./esm2022/code-block/koobiq-components-code-block.mjs",
             "esm": "./esm2022/code-block/koobiq-components-code-block.mjs",
             "default": "./fesm2022/koobiq-components-code-block.mjs"
         },
+        "./content-panel": {
+            "types": "./content-panel/index.d.ts",
+            "esm2022": "./esm2022/content-panel/koobiq-components-content-panel.mjs",
+            "esm": "./esm2022/content-panel/koobiq-components-content-panel.mjs",
+            "default": "./fesm2022/koobiq-components-content-panel.mjs"
+        },
         "./core": {
             "types": "./core/index.d.ts",
             "esm2022": "./esm2022/core/koobiq-components-core.mjs",
@@ -154,6 +166,12 @@
             "esm": "./esm2022/dropdown/koobiq-components-dropdown.mjs",
             "default": "./fesm2022/koobiq-components-dropdown.mjs"
         },
+        "./dynamic-translation": {
+            "types": "./dynamic-translation/index.d.ts",
+            "esm2022": "./esm2022/dynamic-translation/koobiq-components-dynamic-translation.mjs",
+            "esm": "./esm2022/dynamic-translation/koobiq-components-dynamic-translation.mjs",
+            "default": "./fesm2022/koobiq-components-dynamic-translation.mjs"
+        },
         "./ellipsis-center": {
             "types": "./ellipsis-center/index.d.ts",
             "esm2022": "./esm2022/ellipsis-center/koobiq-components-ellipsis-center.mjs",
@@ -232,6 +250,12 @@
             "esm": "./esm2022/navbar/koobiq-components-navbar.mjs",
             "default": "./fesm2022/koobiq-components-navbar.mjs"
         },
+        "./navbar-ic": {
+            "types": "./navbar-ic/index.d.ts",
+            "esm2022": "./esm2022/navbar-ic/koobiq-components-navbar-ic.mjs",
+            "esm": "./esm2022/navbar-ic/koobiq-components-navbar-ic.mjs",
+            "default": "./fesm2022/koobiq-components-navbar-ic.mjs"
+        },
         "./overflow-items": {
             "types": "./overflow-items/index.d.ts",
             "esm2022": "./esm2022/overflow-items/koobiq-components-overflow-items.mjs",
@@ -375,6 +399,12 @@
             "esm2022": "./esm2022/tree-select/koobiq-components-tree-select.mjs",
             "esm": "./esm2022/tree-select/koobiq-components-tree-select.mjs",
             "default": "./fesm2022/koobiq-components-tree-select.mjs"
+        },
+        "./username": {
+            "types": "./username/index.d.ts",
+            "esm2022": "./esm2022/username/koobiq-components-username.mjs",
+            "esm": "./esm2022/username/koobiq-components-username.mjs",
+            "default": "./fesm2022/koobiq-components-username.mjs"
         }
     },
     "schematics": "./schematics/collection.json",

package/popover/_popover-theme.scss

@@ -2,7 +2,11 @@
 
 @mixin kbq-popover-theme() {
     .kbq-popover {
-        box-shadow: var(--kbq-popover-container-shadow);
+        box-shadow: var(--kbq-popover-borderless-shadow);
+
+        &.kbq-popover_arrowless {
+            box-shadow: var(--kbq-popover-container-shadow);
+        }
     }
 
     .kbq-popover__container {
@@ -10,7 +14,7 @@
     }
 
     .kbq-popover__arrow {
-        box-shadow: var(--kbq-popover-container-shadow);
+        box-shadow: var(--kbq-popover-borderless-shadow);
         background: var(--kbq-popover-container-background);
     }
 

package/popover/popover-confirm.component.d.ts

@@ -12,7 +12,7 @@ export declare class KbqPopoverConfirmComponent extends KbqPopoverComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPopoverConfirmComponent, "kbq-popover-confirm-component", never, {}, {}, never, never, false, never>;
 }
 export declare class KbqPopoverConfirmTrigger extends KbqPopoverTrigger {
-    confirm: EventEmitter<void>;
+    readonly confirm: EventEmitter<void>;
     get confirmText(): string;
     set confirmText(value: string);
     private _confirmText;

package/popover/popover-tokens.scss

@@ -24,4 +24,6 @@
     --kbq-popover-header-scroll-shadow: var(--kbq-shadow-overflow-normal-bottom);
     --kbq-popover-content-text-color: var(--kbq-foreground-contrast);
     --kbq-popover-footer-scroll-shadow: var(--kbq-shadow-overflow-normal-top);
+
+    --kbq-popover-borderless-shadow: 0 2px 8px var(--kbq-shadow-key), 0 3px 8px var(--kbq-shadow-ambient);
 }

package/popover/popover.component.d.ts

@@ -39,6 +39,8 @@ export declare const KBQ_POPOVER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
 export declare function getKbqPopoverInvalidPositionError(position: string): Error;
 export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverComponent> implements AfterContentInit, OnInit {
     protected scrollStrategy: () => ScrollStrategy;
+    /** prevents closure by any event */
+    preventClose: boolean;
     get popoverVisible(): boolean;
     set popoverVisible(value: boolean);
     get popoverPlacement(): PopUpPlacements;
@@ -83,8 +85,8 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     offset: number | null;
     /** Delay before closing in milliseconds. The default value for kbqTrigger=PopUpTriggers.Hover is 500 ms. */
     leaveDelay: number;
-    placementChange: EventEmitter<any>;
-    visibleChange: EventEmitter<boolean>;
+    readonly placementChange: EventEmitter<any>;
+    readonly visibleChange: EventEmitter<boolean>;
     protected originSelector: string;
     protected get overlayConfig(): OverlayConfig;
     ngOnInit(): void;
@@ -99,7 +101,8 @@ export declare class KbqPopoverTrigger extends KbqPopUpTrigger<KbqPopoverCompone
     closingActions(): import("rxjs").Observable<void | CdkScrollable | MouseEvent>;
     private hideIfNotInViewPort;
     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; }; "arrow": { "alias": "kbqPopoverArrow"; "required": false; }; "offset": { "alias": "kbqPopoverOffset"; "required": false; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopoverTrigger, "[kbqPopover]", ["kbqPopover"], { "preventClose": { "alias": "kbqPopoverPreventClose"; "required": false; }; "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; }; "leaveDelay": { "alias": "kbqLeaveDelay"; "required": false; }; }, { "placementChange": "kbqPopoverPlacementChange"; "visibleChange": "kbqPopoverVisibleChange"; }, never, never, false, never>;
+    static ngAcceptInputType_preventClose: unknown;
     static ngAcceptInputType_arrow: unknown;
     static ngAcceptInputType_offset: unknown;
     static ngAcceptInputType_leaveDelay: unknown;