@koobiq/components 18.27.0 → 18.29.0

package/accordion/accordion-trigger.component.scss

@@ -8,6 +8,8 @@
     outline: none;
 
     & .kbq-accordion-trigger__icon {
+        box-sizing: initial;
+
         padding: var(--kbq-size-xxs);
 
         transition: transform 300ms ease-out;

package/actions-panel/actions-panel-container.scss

@@ -4,7 +4,6 @@
     box-shadow: var(--kbq-actions-panel-box-shadow);
     height: var(--kbq-actions-panel-height);
     padding: var(--kbq-actions-panel-padding);
-    margin: var(--kbq-actions-panel-margin);
     border-radius: var(--kbq-actions-panel-border-radius);
     display: flex;
     flex-grow: 1;
@@ -26,6 +25,10 @@
     }
 }
 
+.kbq-actions-panel-overlay {
+    margin: var(--kbq-actions-panel-margin);
+}
+
 .kbq-actions-panel-overlay-container {
     // Required for positioning the overlay inside the custom container
     // See: KbqActionsPanelConfig.overlayContainer

package/actions-panel/actions-panel-tokens.scss

@@ -1,4 +1,5 @@
-.kbq-actions-panel-container {
+.kbq-actions-panel-container,
+.kbq-actions-panel-overlay {
     --kbq-actions-panel-background-color: var(--kbq-background-contrast);
     --kbq-actions-panel-text-color: var(--kbq-foreground-on-contrast);
     --kbq-actions-panel-padding: var(--kbq-size-s);

package/breadcrumbs/breadcrumbs.d.ts

@@ -119,7 +119,7 @@ export declare class KbqBreadcrumbs implements AfterContentInit {
     ngAfterContentInit(): void;
     private getItemWidth;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbs, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "firstItemNegativeMargin": { "alias": "firstItemNegativeMargin"; "required": false; }; "size": { "alias": "size"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "wrapMode": { "alias": "wrapMode"; "required": false; }; }, {}, ["separator", "items"], never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "firstItemNegativeMargin": { "alias": "firstItemNegativeMargin"; "required": false; }; "size": { "alias": "size"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "wrapMode": { "alias": "wrapMode"; "required": false; }; }, {}, ["separator", "items"], ["*"], true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_firstItemNegativeMargin: unknown;
     static ngAcceptInputType_disabled: unknown;
 }

package/checkbox/checkbox.scss

@@ -32,6 +32,8 @@
         checkbox-size-normal-horizontal-content-padding]
     );
 
+    box-sizing: initial;
+
     // required for `.cdk-visually-hidden` input to be positioned correctly
     position: relative;
 

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

@@ -0,0 +1,12 @@
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class KbqNormalizeWhitespace {
+    /** @docs-private */
+    protected elementRef: ElementRef<HTMLElement>;
+    /**
+     * Replace thin-space with space on copy event
+     */
+    onCopy($event: ClipboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNormalizeWhitespace, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNormalizeWhitespace, "[kbqNormalizeWhitespace]", never, {}, {}, never, never, true, never>;
+}

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

@@ -1,5 +1,6 @@
 import { InjectionToken } from '@angular/core';
 export * from './checkbox';
+export * from './clipboard';
 export { CanColor, CanColorCtor, KbqColorDirective, KbqComponentColors, mixinColor, ThemePalette } from './color';
 export { KBQ_SANITY_CHECKS, KbqCommonModule } from './common-module';
 export { CanDisable, CanDisableCtor, mixinDisabled } from './disabled';

package/core/formatters/filesize/config.d.ts

@@ -0,0 +1,66 @@
+import { InjectionToken, Provider } from '@angular/core';
+/**
+ * @deprecated Will be removed in next major release. Use `KbqMeasurementSystem` instead.
+ * @docs-private
+ */
+export declare enum MeasurementSystem {
+    SI = "SI",
+    IEC = "IEC"
+}
+/**
+ * Available unit systems for file size formatting.
+ * - SI (Metric): 1 KB = 1000 bytes
+ * - IEC (Binary): 1 KiB = 1024 bytes
+ */
+export declare enum KbqMeasurementSystem {
+    SI = "SI",
+    IEC = "IEC"
+}
+/** Unit systems as union type */
+export type KbqMeasurementSystemType = keyof typeof KbqMeasurementSystem;
+export interface KbqUnitSystem {
+    abbreviations: string[];
+    base: number;
+    power: number;
+}
+/**
+ * @deprecated Will be removed in next major release. Use `KbqSizeUnitsConfig` instead.
+ * @docs-private
+ */
+export interface SizeUnitsConfig {
+    defaultUnitSystem: string;
+    defaultPrecision: number;
+    unitSystems: {
+        [MeasurementSystem.SI]: KbqUnitSystem;
+        [MeasurementSystem.IEC]: KbqUnitSystem;
+    };
+}
+/**
+ * Configuration for file size formatting options.
+ * Defines the default unit system, precision, and available unit systems.
+ */
+export interface KbqSizeUnitsConfig {
+    /**
+     * Default unit system to use (e.g., 'SI' or 'IEC').
+     * @see KbqMeasurementSystem
+     */
+    defaultUnitSystem: KbqMeasurementSystemType;
+    /**
+     * Default number of decimal places to display in formatted output.
+     * @example
+     * `2` → "1.23 KB"
+     */
+    defaultPrecision: number;
+    /** @see KbqMeasurementSystem */
+    unitSystems: {
+        [KbqMeasurementSystem.SI]: KbqUnitSystem;
+        [KbqMeasurementSystem.IEC]: KbqUnitSystem;
+    };
+}
+export declare const KBQ_SIZE_UNITS_DEFAULT_CONFIG: KbqSizeUnitsConfig;
+/**
+ * Configuration for converting sizes in different unit systems.
+ */
+export declare const KBQ_SIZE_UNITS_CONFIG: InjectionToken<KbqSizeUnitsConfig>;
+/** Utility provider for `KBQ_SIZE_UNITS_CONFIG`. */
+export declare const kbqFilesizeFormatterConfigurationProvider: (configuration: Partial<KbqSizeUnitsConfig>) => Provider;

package/core/formatters/filesize/formatter.d.ts

@@ -0,0 +1,17 @@
+import { PipeTransform } from '@angular/core';
+import { KbqMeasurementSystemType, KbqSizeUnitsConfig } from './config';
+import * as i0 from "@angular/core";
+export declare class KbqDataSizePipe implements PipeTransform {
+    /** Injects the external configuration for size units, if available. */
+    readonly externalConfig: KbqSizeUnitsConfig | null;
+    private readonly localeService;
+    private readonly numberPipe;
+    private readonly nonBreakingSpace;
+    private config;
+    constructor();
+    /** Transforms bytes into localized size string */
+    transform(source: number, precision?: number, unitSystemName?: KbqMeasurementSystemType, locale?: string): string;
+    private updateLocaleParams;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqDataSizePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<KbqDataSizePipe, "kbqDataSize", true>;
+}

package/core/{utils/data-size → formatters/filesize}/index.d.ts

@@ -1,3 +1,3 @@
 export * from './config';
-export * from './data-size.pipe';
+export * from './formatter';
 export * from './size';

package/core/formatters/filesize/size.d.ts

@@ -0,0 +1,36 @@
+import { KbqUnitSystem } from './config';
+export declare const KBQ_INVALID_VALUE_ERROR = "Argument \"value\" must be a finite number!";
+/**
+ * @deprecated Will be removed in next major release. Use `getFormattedSizeParts` instead.
+ * @docs-private
+ */
+export declare const formatDataSize: (value: number, precision: number, system: KbqUnitSystem) => {
+    value: string;
+    unit: string;
+};
+/**
+ * Converts a byte value into locale-independent file size parts: numeric value and unit abbreviation.
+ *
+ * @param value - size in bytes.
+ * @param precision - digits after the decimal point (e.g., `2` → "1.02 KB").
+ * @param system - unit system defining abbreviations and base scaling (SI/IEC).
+ * @returns Object with the formatted size info.
+ *
+ * @example
+ * formatDataSize(1500, 2, 'SI'); // { value: "1.50", unit: "KB" }
+ */
+export declare const getFormattedSizeParts: (value: number, precision: number, system: KbqUnitSystem) => {
+    value: string;
+    unit: string;
+};
+/**
+ * Converts bytes to Kb, Mb, Gb
+ *
+ * @param value the number of bytes
+ * @param system the measurement system
+ * @param threshold the lower counting threshold
+ */
+export declare const getHumanizedBytes: (value: number, system: KbqUnitSystem, threshold?: number) => {
+    result: number;
+    unit: string;
+};

package/core/formatters/index.d.ts

@@ -1,11 +1,13 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./number/formatter";
 import * as i2 from "./date/formatter.pipe";
+import * as i3 from "./filesize/formatter";
 export declare class KbqFormattersModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFormattersModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqFormattersModule, [typeof i1.KbqDecimalPipe, typeof i1.KbqRoundDecimalPipe, typeof i1.KbqTableNumberPipe], [typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe, typeof i2.AbsoluteDateFormatterImpurePipe, typeof i2.AbsoluteDateTimeFormatterImpurePipe, typeof i2.AbsoluteDateShortFormatterImpurePipe, typeof i2.AbsoluteShortDateTimeFormatterImpurePipe, typeof i2.RelativeDateFormatterImpurePipe, typeof i2.RelativeDateTimeFormatterImpurePipe, typeof i2.RelativeShortDateFormatterImpurePipe, typeof i2.RelativeShortDateTimeFormatterImpurePipe, typeof i2.RangeDateFormatterImpurePipe, typeof i2.RangeShortDateFormatterImpurePipe, typeof i2.RangeDateTimeFormatterImpurePipe, typeof i2.RangeShortDateTimeFormatterImpurePipe, typeof i2.RangeMiddleDateTimeFormatterImpurePipe], [typeof i1.KbqDecimalPipe, typeof i1.KbqRoundDecimalPipe, typeof i1.KbqTableNumberPipe, typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe, typeof i2.AbsoluteDateFormatterImpurePipe, typeof i2.AbsoluteDateTimeFormatterImpurePipe, typeof i2.AbsoluteDateShortFormatterImpurePipe, typeof i2.AbsoluteShortDateTimeFormatterImpurePipe, typeof i2.RelativeDateFormatterImpurePipe, typeof i2.RelativeDateTimeFormatterImpurePipe, typeof i2.RelativeShortDateFormatterImpurePipe, typeof i2.RelativeShortDateTimeFormatterImpurePipe, typeof i2.RangeDateFormatterImpurePipe, typeof i2.RangeShortDateFormatterImpurePipe, typeof i2.RangeDateTimeFormatterImpurePipe, typeof i2.RangeShortDateTimeFormatterImpurePipe, typeof i2.RangeMiddleDateTimeFormatterImpurePipe]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqFormattersModule, [typeof i1.KbqDecimalPipe, typeof i1.KbqRoundDecimalPipe, typeof i1.KbqTableNumberPipe], [typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe, typeof i2.AbsoluteDateFormatterImpurePipe, typeof i2.AbsoluteDateTimeFormatterImpurePipe, typeof i2.AbsoluteDateShortFormatterImpurePipe, typeof i2.AbsoluteShortDateTimeFormatterImpurePipe, typeof i2.RelativeDateFormatterImpurePipe, typeof i2.RelativeDateTimeFormatterImpurePipe, typeof i2.RelativeShortDateFormatterImpurePipe, typeof i2.RelativeShortDateTimeFormatterImpurePipe, typeof i2.RangeDateFormatterImpurePipe, typeof i2.RangeShortDateFormatterImpurePipe, typeof i2.RangeDateTimeFormatterImpurePipe, typeof i2.RangeShortDateTimeFormatterImpurePipe, typeof i2.RangeMiddleDateTimeFormatterImpurePipe, typeof i3.KbqDataSizePipe], [typeof i1.KbqDecimalPipe, typeof i1.KbqRoundDecimalPipe, typeof i1.KbqTableNumberPipe, typeof i2.AbsoluteDateFormatterPipe, typeof i2.AbsoluteDateTimeFormatterPipe, typeof i2.AbsoluteDateShortFormatterPipe, typeof i2.AbsoluteShortDateTimeFormatterPipe, typeof i2.RelativeDateFormatterPipe, typeof i2.RelativeDateTimeFormatterPipe, typeof i2.RelativeShortDateFormatterPipe, typeof i2.RelativeShortDateTimeFormatterPipe, typeof i2.RangeDateFormatterPipe, typeof i2.RangeShortDateFormatterPipe, typeof i2.RangeDateTimeFormatterPipe, typeof i2.RangeShortDateTimeFormatterPipe, typeof i2.RangeMiddleDateTimeFormatterPipe, typeof i2.AbsoluteDateFormatterImpurePipe, typeof i2.AbsoluteDateTimeFormatterImpurePipe, typeof i2.AbsoluteDateShortFormatterImpurePipe, typeof i2.AbsoluteShortDateTimeFormatterImpurePipe, typeof i2.RelativeDateFormatterImpurePipe, typeof i2.RelativeDateTimeFormatterImpurePipe, typeof i2.RelativeShortDateFormatterImpurePipe, typeof i2.RelativeShortDateTimeFormatterImpurePipe, typeof i2.RangeDateFormatterImpurePipe, typeof i2.RangeShortDateFormatterImpurePipe, typeof i2.RangeDateTimeFormatterImpurePipe, typeof i2.RangeShortDateTimeFormatterImpurePipe, typeof i2.RangeMiddleDateTimeFormatterImpurePipe, typeof i3.KbqDataSizePipe]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqFormattersModule>;
 }
 export * from './date/formatter';
 export * from './date/formatter.pipe';
+export * from './filesize/index';
 export * from './number/formatter';

package/core/formatters/number/formatter.d.ts

@@ -1,8 +1,17 @@
 import { InjectionToken, PipeTransform } from '@angular/core';
-import { KbqLocaleService } from '../../locales';
+import { KbqLocaleService, KbqNumberFormatOptions } from '../../locales';
 import * as i0 from "@angular/core";
-export declare const KBQ_NUMBER_FORMATTER_OPTIONS: InjectionToken<string>;
+export declare const KBQ_NUMBER_FORMATTER_OPTIONS: InjectionToken<ParsedDigitsInfo>;
 export declare const KBQ_NUMBER_FORMATTER_DEFAULT_OPTIONS: ParsedDigitsInfo;
+/** Formats a number value according to locale and formatting options */
+export declare function formatNumberWithLocale(value: unknown, formatter: Intl.NumberFormat, options?: KbqNumberFormatOptions): string;
+/**
+ * Special contract between `KbqDecimalPipe` and `KbqTableNumberPipe`,
+ * so they can be interchangeable in the cases of usage
+ */
+export interface KbqNumericPipe {
+    transform(value: unknown, digitsInfo?: string, locale?: string): string | null;
+}
 export declare const NUMBER_FORMAT_REGEXP: RegExp;
 interface RoundDecimalOptions {
     separator: string;
@@ -21,7 +30,7 @@ declare class ParsedDigitsInfo {
     minimumFractionDigits: number;
     maximumFractionDigits: number;
 }
-export declare class KbqDecimalPipe implements PipeTransform {
+export declare class KbqDecimalPipe implements KbqNumericPipe, PipeTransform {
     private id;
     private localeService;
     private readonly options;
@@ -46,7 +55,7 @@ export declare class KbqDecimalPipe implements PipeTransform {
     static ɵpipe: i0.ɵɵPipeDeclaration<KbqDecimalPipe, "kbqNumber", false>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqDecimalPipe>;
 }
-export declare class KbqTableNumberPipe implements PipeTransform {
+export declare class KbqTableNumberPipe implements KbqNumericPipe, PipeTransform {
     private id;
     private localeService;
     private readonly options;

package/core/locales/formatters.d.ts

@@ -18,7 +18,7 @@ export declare const enUSFormattersData: {
         };
     };
     sizeUnits: {
-        defaultUnitSystem: string;
+        defaultUnitSystem: "SI";
         defaultPrecision: number;
         unitSystems: {
             SI: {
@@ -45,12 +45,16 @@ export declare const esLAFormattersData: {
                 billion: string;
                 trillion: string;
             };
+            decimal: {
+                viewGroupSeparator: string;
+            };
         };
     };
     input: {
         number: {
             groupSeparator: string[];
             fractionSeparator: string;
+            viewGroupSeparator: string;
         };
     };
     sizeUnits: {
@@ -154,6 +158,9 @@ export declare const ruRUFormattersData: {
                 billion: string;
                 trillion: string;
             };
+            decimal: {
+                viewGroupSeparator: string;
+            };
         };
     };
     input: {
@@ -161,6 +168,7 @@ export declare const ruRUFormattersData: {
             groupSeparator: string[];
             fractionSeparator: string;
             startFormattingFrom: number;
+            viewGroupSeparator: string;
         };
     };
     sizeUnits: {

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

@@ -28,7 +28,7 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
             };
         };
         sizeUnits: {
-            defaultUnitSystem: string;
+            defaultUnitSystem: "SI";
             defaultPrecision: number;
             unitSystems: {
                 SI: {
@@ -267,12 +267,16 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                     billion: string;
                     trillion: string;
                 };
+                decimal: {
+                    viewGroupSeparator: string;
+                };
             };
         };
         input: {
             number: {
                 groupSeparator: string[];
                 fractionSeparator: string;
+                viewGroupSeparator: string;
             };
         };
         sizeUnits: {
@@ -515,6 +519,9 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                     billion: string;
                     trillion: string;
                 };
+                decimal: {
+                    viewGroupSeparator: string;
+                };
             };
         };
         input: {
@@ -522,6 +529,7 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 groupSeparator: string[];
                 fractionSeparator: string;
                 startFormattingFrom: number;
+                viewGroupSeparator: string;
             };
         };
         sizeUnits: {

package/core/locales/types.d.ts

@@ -15,3 +15,17 @@ export type KbqCodeBlockLocaleConfiguration = {
 export type KbqActionsPanelLocaleConfiguration = {
     closeTooltip: string;
 };
+/** Options for overriding locale-based number formatting */
+export type KbqNumberFormatOptions = {
+    /** Overrides the default group separator in the formatted output */
+    viewGroupSeparator?: string;
+};
+/** Locale configuration for `KbqNumberInput`. */
+export type KbqNumberInputLocaleConfig = {
+    /** Characters recognized as group (thousands) separators. */
+    groupSeparator: string[];
+    /** Character used for the decimal separator */
+    fractionSeparator: string;
+    /** Number of digits before applying group separators */
+    startFormattingFrom?: number;
+} & KbqNumberFormatOptions;