@koobiq/components 18.36.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/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

@@ -69,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 {
@@ -209,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

@@ -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;

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/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

@@ -6,7 +6,7 @@ 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 './hovered';
+export * from './hover';
 export * from './orientation';
 export * from './read-state';
 export { KbqDefaultSizes } from './size';

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';

package/core/locales/locale-service.d.ts

@@ -205,201 +205,6 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
             repeat: string;
         };
     };
-    'zh-CN': {
-        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;
-                };
-            };
-        };
-        select: {
-            hiddenItemsText: string;
-        };
-        datepicker: {
-            placeholder: string;
-        };
-        timepicker: {
-            placeholder: {
-                full: string;
-                short: string;
-            };
-        };
-        fileUpload: {
-            single: {
-                captionText: string;
-                browseLink: string;
-            };
-            multiple: {
-                captionText: string;
-                captionTextWhenSelected: string;
-                captionTextForCompactSize: string;
-                browseLink: string;
-                title: string;
-                gridHeaders: {
-                    file: string;
-                    size: string;
-                };
-            };
-        };
-        codeBlock: {
-            softWrapOnTooltip: string;
-            softWrapOffTooltip: string;
-            downloadTooltip: string;
-            copiedTooltip: string;
-            copyTooltip: string;
-            viewAllText: string;
-            viewLessText: string;
-            openExternalSystemTooltip: string;
-        };
-        timezone: {
-            searchPlaceholder: string;
-        };
-        actionsPanel: {
-            closeTooltip: string;
-        };
-        filterBar: {
-            reset: {
-                buttonName: string;
-            };
-            search: {
-                tooltip: string;
-                placeholder: string;
-            };
-            filters: {
-                defaultName: string;
-                saveNewFilterTooltip: string;
-                searchPlaceholder: string;
-                searchEmptyResult: string;
-                saveAsNewFilter: string;
-                saveChanges: string;
-                saveAsNew: string;
-                change: string;
-                resetChanges: string;
-                remove: string;
-                name: string;
-                error: string;
-                errorHint: string;
-                saveButton: string;
-                cancelButton: string;
-            };
-            add: {
-                tooltip: string;
-            };
-            pipe: {
-                clearButtonTooltip: string;
-                removeButtonTooltip: string;
-                applyButton: string;
-                emptySearchResult: string;
-                selectAll: string;
-            };
-            datePipe: {
-                customPeriod: string;
-                customPeriodFrom: string;
-                customPeriodTo: string;
-                customPeriodErrorHint: string;
-                backToPeriodSelection: string;
-            };
-        };
-        clampedText: {
-            openText: string;
-            closeText: string;
-        };
-        navbarIc: {
-            toggle: {
-                pinButton: string;
-                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;
-        };
-    };
     'es-LA': {
         formatters: {
             number: {
@@ -998,203 +803,6 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
             repeat: string;
         };
     };
-    'fa-IR': {
-        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;
-                };
-            };
-        };
-        select: {
-            hiddenItemsText: string;
-        };
-        datepicker: {
-            placeholder: string;
-        };
-        timepicker: {
-            placeholder: {
-                full: string;
-                short: string;
-            };
-        };
-        fileUpload: {
-            single: {
-                captionText: string;
-                browseLink: string;
-            };
-            multiple: {
-                captionText: string;
-                captionTextWhenSelected: string;
-                captionTextForCompactSize: string;
-                browseLink: string;
-                title: string;
-                gridHeaders: {
-                    file: string;
-                    size: string;
-                };
-            };
-        };
-        codeBlock: {
-            softWrapOnTooltip: string;
-            softWrapOffTooltip: string;
-            downloadTooltip: string;
-            copiedTooltip: string;
-            copyTooltip: string;
-            viewAllText: string;
-            viewLessText: string;
-            openExternalSystemTooltip: string;
-        };
-        timezone: {
-            searchPlaceholder: string;
-        };
-        actionsPanel: {
-            closeTooltip: string;
-        };
-        filterBar: {
-            reset: {
-                buttonName: string;
-            };
-            search: {
-                tooltip: string;
-                placeholder: string;
-            };
-            filters: {
-                defaultName: string;
-                saveNewFilterTooltip: string;
-                searchPlaceholder: string;
-                searchEmptyResult: string;
-                saveAsNewFilter: string;
-                saveChanges: string;
-                saveAsNew: string;
-                change: string;
-                resetChanges: string;
-                remove: string;
-                name: string;
-                error: string;
-                errorHint: string;
-                saveButton: string;
-                cancelButton: string;
-            };
-            add: {
-                tooltip: string;
-            };
-            pipe: {
-                clearButtonTooltip: string;
-                removeButtonTooltip: string;
-                applyButton: string;
-                emptySearchResult: string;
-                selectAll: string;
-            };
-            datePipe: {
-                customPeriod: string;
-                customPeriodFrom: string;
-                customPeriodTo: string;
-                customPeriodErrorHint: string;
-                backToPeriodSelection: string;
-            };
-        };
-        clampedText: {
-            openText: string;
-            closeText: string;
-        };
-        navbarIc: {
-            toggle: {
-                pinButton: string;
-                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;
-        };
-    };
     'tk-TM': {
         formatters: {
             number: {

package/core/option/option.d.ts

@@ -57,7 +57,7 @@ export declare class KbqVirtualOption extends KbqOptionBase {
  * Single option inside of a `<kbq-select>` element.
  */
 export declare class KbqOption extends KbqOptionBase implements AfterViewChecked, OnDestroy, KbqTitleTextRef {
-    private readonly element;
+    private readonly elementRef;
     private readonly changeDetectorRef;
     private readonly parent;
     readonly group: KbqOptgroup;
@@ -98,9 +98,10 @@ export declare class KbqOption extends KbqOptionBase implements AfterViewChecked
     get active(): boolean;
     private _active;
     private mostRecentViewValue;
-    constructor(element: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, parent: KbqOptionParentComponent, group: KbqOptgroup);
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, parent: KbqOptionParentComponent, group: KbqOptgroup);
     ngAfterViewChecked(): void;
     ngOnDestroy(): void;
+    /** @docs-private */
     getHeight(): number;
     select(emitEvent?: boolean): void;
     deselect(emitEvent?: boolean): void;

package/core/select/common.d.ts

@@ -7,8 +7,10 @@ export declare class KbqSelectTrigger {
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectTrigger, "kbq-select-trigger, [kbq-select-trigger]", never, {}, {}, never, never, true, never>;
 }
 export declare class KbqSelectMatcher {
+    useDefaultHandlers: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectMatcher, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectMatcher, "kbq-select-matcher, [kbq-select-matcher]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqSelectMatcher, "kbq-select-matcher, [kbq-select-matcher]", never, { "useDefaultHandlers": { "alias": "useDefaultHandlers"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_useDefaultHandlers: unknown;
 }
 export declare class KbqSelectFooter {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqSelectFooter, never>;

package/core/styles/common/_select.scss

@@ -227,3 +227,23 @@
 
     padding: var(--kbq-size-xxs) var(--kbq-size-l);
 }
+
+@mixin item-active-area($outline) {
+    position: relative;
+
+    &:before,
+    &:after {
+        position: absolute;
+        content: '';
+        width: var(--kbq-size-xxs);
+        height: calc(100% + $outline * 2); // outline size * 2
+    }
+
+    &:before {
+        right: calc(100% + $outline); // outline size
+    }
+
+    &:after {
+        left: calc(100% + $outline); // outline size
+    }
+}