@koobiq/components 18.35.0 → 18.37.0

package/autocomplete/autocomplete.scss

@@ -1,4 +1,5 @@
 @use '../core/styles/common/tokens' as *;
+@use '../core/styles/common/select';
 
 @use './autocomplete-theme' as *;
 
@@ -29,23 +30,7 @@
     }
 
     .kbq-option {
-        position: relative;
-
-        &:before,
-        &:after {
-            position: absolute;
-            content: '';
-            width: var(--kbq-size-xxs);
-            height: calc(100% + var(--kbq-size-3xs) * 2); // outline size * 2
-        }
-
-        &:before {
-            right: calc(100% + var(--kbq-size-3xs)); // outline size
-        }
-
-        &:after {
-            left: calc(100% + var(--kbq-size-3xs)); // outline size
-        }
+        @include select.item-active-area(var(--kbq-size-3xs));
     }
 
     // We need to offset horizontal dividers by their height, because

package/badge/badge.component.d.ts

@@ -28,7 +28,7 @@ export declare class KbqBadgeCssStyler implements AfterContentInit {
     icons: QueryList<KbqIcon>;
     nativeElement: HTMLElement;
     isIconButton: boolean;
-    constructor(elementRef: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef);
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2, cdr: ChangeDetectorRef);
     ngAfterContentInit(): void;
     updateClassModifierForIcons(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeCssStyler, [null, null, { skipSelf: true; }]>;

package/badge/badge.component.scss

@@ -8,6 +8,7 @@
     justify-content: flex-start;
     align-items: center;
     height: var(--kbq-badge-size-normal-height);
+    min-height: var(--kbq-badge-size-normal-height);
     text-align: center;
     white-space: nowrap;
 
@@ -36,6 +37,7 @@
     }
 
     &.kbq-badge_compact {
+        min-height: var(--kbq-badge-size-compact-height);
         height: var(--kbq-badge-size-compact-height);
 
         padding-right: var(--kbq-badge-size-compact-horizontal-padding);

package/breadcrumbs/breadcrumbs.d.ts

@@ -23,7 +23,7 @@ export declare class KbqBreadcrumbButton implements OnInit {
     private readonly button;
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbButton, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBreadcrumbButton, "[kbq-button][kbqBreadcrumb]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBreadcrumbButton, "[kbq-button][kbqBreadcrumb]", never, {}, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: { "focusable": "focusable"; }; outputs: {}; }]>;
 }
 /**
  * Directive provides a way to define a custom template for breadcrumb rendering, leveraging TemplateRef
@@ -116,6 +116,7 @@ export declare class KbqBreadcrumbs implements AfterContentInit {
      * @docs-private
      */
     protected get maxWidth(): number | null;
+    constructor();
     ngAfterContentInit(): void;
     private getItemWidth;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbs, never>;

package/breadcrumbs/breadcrumbs.scss

@@ -27,6 +27,10 @@
         flex-wrap: wrap;
     }
 
+    &:not(.kbq-breadcrumbs_wrap) {
+        overflow: hidden;
+    }
+
     &.kbq-breadcrumbs_compact {
         .kbq-breadcrumb-item {
             &.kbq-button,
@@ -65,6 +69,10 @@
             --kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);
             --kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius);
         }
+
+        &:focus-visible {
+            outline-offset: unset;
+        }
     }
 
     .kbq-breadcrumb__expand {
@@ -205,7 +213,3 @@
     @include _kbq-breadcrumbs-theme();
     @include _kbq-breadcrumbs-typography();
 }
-
-.kbq-breadcrumb-item__link-behavior {
-    text-decoration: none;
-}

package/button/button.component.d.ts

@@ -16,7 +16,7 @@ export declare class KbqButtonCssStyler implements AfterContentInit {
     icons: QueryList<KbqIcon>;
     nativeElement: HTMLElement;
     isIconButton: boolean;
-    constructor(elementRef: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef);
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2, cdr: ChangeDetectorRef);
     ngAfterContentInit(): void;
     updateClassModifierForIcons(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonCssStyler, [null, null, { skipSelf: true; }]>;
@@ -25,6 +25,7 @@ export declare class KbqButtonCssStyler implements AfterContentInit {
 export declare class KbqButton extends KbqColorDirective implements OnDestroy, AfterViewInit, KbqTitleTextRef {
     private focusMonitor;
     private styler;
+    private readonly changeDetectorRef;
     hasFocus: boolean;
     textElement: ElementRef;
     get kbqStyle(): string;
@@ -41,7 +42,7 @@ export declare class KbqButton extends KbqColorDirective implements OnDestroy, A
     ngOnDestroy(): void;
     onFocus($event: any): void;
     onBlur(): void;
-    getHostElement(): any;
+    getHostElement(): HTMLElement;
     focus(): void;
     focusViaKeyboard(): void;
     haltDisabledEvents(event: Event): void;

package/button-toggle/button-toggle.scss

@@ -1,5 +1,3 @@
-@use '../core/styles/common';
-
 @use '../core/styles/common/tokens' as *;
 
 @use './button-toggle-theme' as *;

package/content-panel/content-panel.d.ts

@@ -1,7 +1,7 @@
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors } from '@koobiq/components/core';
+import { KbqResizerSizeChangeEvent } from '@koobiq/components/resizer';
 import { KbqScrollbar } from '@koobiq/components/scrollbar';
-import { KbqResizerSizeChangeEvent } from './resizable';
 import * as i0 from "@angular/core";
 export declare class KbqContentPanelAside {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelAside, never>;

package/content-panel/index.d.ts

@@ -1,3 +1,2 @@
 export * from './content-panel';
 export * from './module';
-export * from './resizable';

package/core/common-behaviors/clipboard.d.ts

@@ -2,7 +2,7 @@ import { ElementRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class KbqNormalizeWhitespace {
     /** @docs-private */
-    protected elementRef: ElementRef<HTMLElement>;
+    protected readonly elementRef: ElementRef<HTMLElement>;
     /**
      * Replace thin-space with space on copy event
      */

package/core/common-behaviors/color.d.ts

@@ -33,11 +33,11 @@ export declare enum KbqComponentColors {
 /** Mixin to augment a directive with a `color` property. */
 export declare function mixinColor<T extends AbstractConstructor<HasElementRef>>(base: T, defaultColor?: KbqComponentColors | ThemePalette): CanColorCtor & T;
 export declare class KbqColorDirective {
-    /**
-     * @docs-private
-     */
-    readonly elementRef: ElementRef<any>;
-    private defaultColor;
+    /** @docs-private */
+    readonly elementRef: ElementRef<HTMLElement>;
+    /** @docs-private */
+    protected defaultColor: KbqComponentColors | ThemePalette | string;
+    /** current class name of color */
     get colorClassName(): KbqComponentColors | ThemePalette | string;
     get color(): KbqComponentColors | ThemePalette | string;
     set color(value: KbqComponentColors | ThemePalette | string);

package/core/common-behaviors/focus-monitor.d.ts

@@ -0,0 +1,19 @@
+import { FocusOrigin } from '@angular/cdk/a11y';
+import { AfterContentInit, ElementRef, OnDestroy } from '@angular/core';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+/** Directive that wraps cdk `FocusMonitor` into standalone directive */
+export declare class KbqFocusMonitor implements AfterContentInit, OnDestroy {
+    /** Whether to monitor focus changes on child elements. */
+    readonly checkChildren: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Observable that emits focus origin when element or its children gains/loses focus. */
+    focusChange: Observable<FocusOrigin> | null;
+    private readonly elementRef;
+    private focusMonitor;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    /** Programmatically focuses an element with the specified origin. */
+    focusVia(element: HTMLElement | ElementRef<HTMLElement>, origin: FocusOrigin, options?: FocusOptions): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqFocusMonitor, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqFocusMonitor, "[kbqFocusMonitor]", ["kbqFocusMonitor"], { "checkChildren": { "alias": "checkChildren"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/core/common-behaviors/hover.d.ts

@@ -0,0 +1,15 @@
+import * as i0 from "@angular/core";
+/**
+ * Directive that adds a `kbq-hovered` class to an element, based on its hover state.
+ *
+ * @docs-private
+ */
+export declare class KbqHover {
+    private readonly element;
+    /**
+     * Whether the element is hovered.
+     */
+    readonly hovered: import("@angular/core").Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqHover, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqHover, "[kbqHover]", ["kbqHover"], {}, {}, never, never, true, never>;
+}

package/core/common-behaviors/index.d.ts

@@ -5,6 +5,10 @@ export { CanColor, CanColorCtor, KbqColorDirective, KbqComponentColors, mixinCol
 export { KBQ_SANITY_CHECKS, KbqCommonModule } from './common-module';
 export { CanDisable, CanDisableCtor, mixinDisabled } from './disabled';
 export { CanUpdateErrorState, CanUpdateErrorStateCtor, KbqErrorStateTracker, mixinErrorState } from './error-state';
+export * from './focus-monitor';
+export * from './hover';
+export * from './orientation';
+export * from './read-state';
 export { KbqDefaultSizes } from './size';
 export { HasTabIndex, HasTabIndexCtor, mixinTabIndex } from './tabindex';
 export declare const KBQ_PARENT_ANIMATION_COMPONENT: InjectionToken<any>;

package/core/common-behaviors/orientation.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Defines component orientation.
+ */
+export type KbqOrientation = 'horizontal' | 'vertical';

package/core/common-behaviors/read-state.d.ts

@@ -0,0 +1,12 @@
+import { BehaviorSubject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class KbqReadStateDirective {
+    private readonly changeDetectorRef;
+    timestamp: number;
+    timeToRead: number;
+    readonly read: BehaviorSubject<boolean>;
+    mouseenterHandler(): void;
+    mouseleaveHandler(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqReadStateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqReadStateDirective, never, never, {}, {}, never, never, true, never>;
+}

package/core/locales/en-US.d.ts

@@ -98,4 +98,66 @@ export declare const enUSLocaleData: {
             collapseButton: string;
         };
     };
+    searchExpandable: {
+        tooltip: string;
+        placeholder: string;
+    };
+    appSwitcher: {
+        searchPlaceholder: string;
+        searchEmptyResult: string;
+        sitesHeader: string;
+    };
+    timeRange: {
+        title: {
+            for: string;
+            placeholder: string;
+        };
+        editor: {
+            from: string;
+            to: string;
+            apply: string;
+            cancel: string;
+            rangeLabel: string;
+            allTime: string;
+            currentQuarter: string;
+            currentYear: string;
+        };
+        durationTemplate: {
+            title: {
+                SEPARATOR: string;
+                LAST_PART_SEPARATOR: string;
+                YEARS: string;
+                MONTHS: string;
+                WEEKS: string;
+                DAYS: string;
+                HOURS: string;
+                MINUTES: string;
+                SECONDS: string;
+                YEARS_FRACTION: string;
+                MONTHS_FRACTION: string;
+            };
+            option: {
+                SEPARATOR: string;
+                LAST_PART_SEPARATOR: string;
+                YEARS: string;
+                MONTHS: string;
+                WEEKS: string;
+                DAYS: string;
+                HOURS: string;
+                MINUTES: string;
+                SECONDS: string;
+                YEARS_FRACTION: string;
+                MONTHS_FRACTION: string;
+            };
+        };
+    };
+    notificationCenter: {
+        notifications: string;
+        remove: string;
+        doNotDisturb: string;
+        showPopUpNotifications: string;
+        noNotifications: string;
+        failedToLoadNotifications: string;
+        repeat: string;
+    };
 };

package/core/locales/es-LA.d.ts

@@ -97,4 +97,66 @@ export declare const esLALocaleData: {
             collapseButton: string;
         };
     };
+    searchExpandable: {
+        tooltip: string;
+        placeholder: string;
+    };
+    appSwitcher: {
+        searchPlaceholder: string;
+        searchEmptyResult: string;
+        sitesHeader: string;
+    };
+    timeRange: {
+        title: {
+            for: string;
+            placeholder: string;
+        };
+        editor: {
+            from: string;
+            to: string;
+            apply: string;
+            cancel: string;
+            rangeLabel: string;
+            allTime: string;
+            currentQuarter: string;
+            currentYear: string;
+        };
+        durationTemplate: {
+            title: {
+                SEPARATOR: string;
+                LAST_PART_SEPARATOR: string;
+                YEARS: string;
+                MONTHS: string;
+                WEEKS: string;
+                DAYS: string;
+                HOURS: string;
+                MINUTES: string;
+                SECONDS: string;
+                YEARS_FRACTION: string;
+                MONTHS_FRACTION: string;
+            };
+            option: {
+                SEPARATOR: string;
+                LAST_PART_SEPARATOR: string;
+                YEARS: string;
+                MONTHS: string;
+                WEEKS: string;
+                DAYS: string;
+                HOURS: string;
+                MINUTES: string;
+                SECONDS: string;
+                YEARS_FRACTION: string;
+                MONTHS_FRACTION: string;
+            };
+        };
+    };
+    notificationCenter: {
+        notifications: string;
+        remove: string;
+        doNotDisturb: string;
+        showPopUpNotifications: string;
+        noNotifications: string;
+        failedToLoadNotifications: string;
+        repeat: string;
+    };
 };

package/core/locales/formatters.d.ts

@@ -74,43 +74,6 @@ export declare const esLAFormattersData: {
         };
     };
 };
-export declare const faIRFormattersData: {
-    formatters: {
-        number: {
-            rounding: {
-                separator: string;
-                groupSeparator: string;
-                thousand: string;
-                million: string;
-                billion: string;
-                trillion: string;
-                rtl: boolean;
-            };
-        };
-    };
-    input: {
-        number: {
-            groupSeparator: string[];
-            fractionSeparator: string;
-        };
-    };
-    sizeUnits: {
-        defaultUnitSystem: string;
-        defaultPrecision: number;
-        unitSystems: {
-            SI: {
-                abbreviations: string[];
-                base: number;
-                power: number;
-            };
-            IEC: {
-                abbreviations: string[];
-                base: number;
-                power: number;
-            };
-        };
-    };
-};
 export declare const ptBRFormattersData: {
     formatters: {
         number: {
@@ -188,41 +151,6 @@ export declare const ruRUFormattersData: {
         };
     };
 };
-export declare const zhCNFormattersData: {
-    formatters: {
-        number: {
-            rounding: {
-                separator: string;
-                groupSeparator: string;
-                tenThousand: string;
-                oneHundredMillions: string;
-                trillion: string;
-            };
-        };
-    };
-    input: {
-        number: {
-            groupSeparator: string[];
-            fractionSeparator: string;
-        };
-    };
-    sizeUnits: {
-        defaultUnitSystem: string;
-        defaultPrecision: number;
-        unitSystems: {
-            SI: {
-                abbreviations: string[];
-                base: number;
-                power: number;
-            };
-            IEC: {
-                abbreviations: string[];
-                base: number;
-                power: number;
-            };
-        };
-    };
-};
 export declare const tkTMFormattersData: {
     formatters: {
         number: {

package/core/locales/index.d.ts

@@ -1,10 +1,8 @@
 export * from './en-US';
 export * from './es-LA';
-export * from './fa-IR';
 export * from './pt-BR';
 export * from './ru-RU';
 export * from './tk-TM';
-export * from './zh-CN';
 export * from './formatters';
 export * from './locale-service';
 export * from './locale-service.module';