@koobiq/components 18.20.0 → 18.21.0

package/breadcrumbs/breadcrumbs-tokens.scss

@@ -5,5 +5,6 @@
     --kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);
     --kbq-breadcrumb-item-border-radius: var(--kbq-size-xs);
     --kbq-breadcrumb-item-icon-color: var(--kbq-icon-contrast-fade);
+    --kbq-breadcrumb-item-negative-margin: calc(-1 * var(--kbq-size-xs));
     --kbq-breadcrumbs-gap: 0;
 }

package/breadcrumbs/breadcrumbs.d.ts

@@ -12,11 +12,15 @@ export type KbqBreadcrumbsConfiguration = {
      */
     max: number | null;
     size: KbqDefaultSizes;
+    /**
+     * Determines if a negative margin should be applied to the first breadcrumb item.
+     */
+    firstItemNegativeMargin: boolean;
 };
 /** Breadcrumbs options global configuration provider. */
 export declare const KBQ_BREADCRUMBS_CONFIGURATION: InjectionToken<KbqBreadcrumbsConfiguration>;
 /** Utility provider for `KBQ_BREADCRUMBS_CONFIGURATION`. */
-export declare const provideKbqBreadcrumbsConfiguration: (configuration: KbqBreadcrumbsConfiguration) => Provider;
+export declare const kbqBreadcrumbsConfigurationProvider: (configuration: Partial<KbqBreadcrumbsConfiguration>) => Provider;
 export declare class KbqBreadcrumbsSeparator {
     readonly templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbsSeparator, never>;
@@ -77,6 +81,12 @@ export declare class KbqBreadcrumbItem {
 }
 export declare class KbqBreadcrumbs implements AfterContentInit {
     protected readonly configuration: KbqBreadcrumbsConfiguration;
+    /**
+     * Determines if a negative margin should be applied to the first breadcrumb item.
+     *
+     * @see KbqBreadcrumbsConfiguration
+     */
+    firstItemNegativeMargin: boolean;
     /**
      * Size of the breadcrumbs. Affects font size.
      * Default value is taken from the global configuration.
@@ -112,6 +122,7 @@ export declare class KbqBreadcrumbs implements AfterContentInit {
     protected get visibleBreadcrumbItems(): KbqBreadcrumbItem[];
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbs, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "size": { "alias": "size"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "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; }; }, {}, ["separator", "items"], never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ngAcceptInputType_firstItemNegativeMargin: unknown;
     static ngAcceptInputType_disabled: unknown;
 }

package/breadcrumbs/breadcrumbs.scss

@@ -1,17 +1,75 @@
 @use '../core/styles/common/tokens';
 @use '../core/styles/common/vendor-prefixes';
 
-.kbq-breadcrumbs {
+@mixin _kbq-breadcrumbs-geometry {
     display: flex;
     align-items: center;
     gap: var(--kbq-breadcrumbs-gap);
 
+    .kbq-breadcrumb-item__container {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    &.kbq-breadcrumbs_first-item-negative-margin {
+        .kbq-breadcrumb-item__container {
+            &:first-of-type {
+                margin-left: var(--kbq-breadcrumb-item-negative-margin);
+            }
+        }
+    }
+
+    &.kbq-breadcrumbs_compact {
+        .kbq-breadcrumb-item {
+            &.kbq-button,
+            &.kbq-button-icon {
+                --kbq-breadcrumb-item-height: var(--kbq-size-xxl);
+            }
+        }
+
+        .kbq-breadcrumb__expand {
+            &.kbq-button-icon {
+                --kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs);
+            }
+        }
+    }
+
+    &.kbq-breadcrumbs_normal {
+        .kbq-breadcrumb-item {
+            &.kbq-button,
+            &.kbq-button-icon {
+                --kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);
+            }
+        }
+    }
+
+    &.kbq-breadcrumbs_big {
+        .kbq-button,
+        .kbq-button-icon {
+            --kbq-button-size-height: var(--kbq-breadcrumb-item-height);
+        }
+    }
+
     .kbq-breadcrumb-item {
         &.kbq-button,
         &.kbq-button-icon {
             --kbq-button-size-height: var(--kbq-breadcrumb-item-height);
             --kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);
             --kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius);
+        }
+    }
+
+    .kbq-breadcrumb__expand {
+        &.kbq-button-icon {
+            --kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding);
+        }
+    }
+}
+
+@mixin _kbq-breadcrumbs-theme {
+    .kbq-breadcrumb-item {
+        &.kbq-button,
+        &.kbq-button-icon {
             --kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast-secondary);
             --kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-breadcrumb-item-icon-color);
             --kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-item-icon-color);
@@ -65,7 +123,6 @@
 
     .kbq-breadcrumb__expand {
         &.kbq-button-icon {
-            --kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding);
             --kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-expand-icon-color);
 
             .kbq-icon {
@@ -101,35 +158,22 @@
 
         color: var(--kbq-foreground-contrast);
     }
+}
 
-    // typography
-    .kbq-breadcrumb__separator {
-        @include vendor-prefixes.user-select(none);
-        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);
-    }
-
+@mixin _kbq-breadcrumbs-typography {
     &.kbq-breadcrumbs_compact {
         .kbq-breadcrumb-item {
             &.kbq-button,
             &.kbq-button-icon {
-                --kbq-breadcrumb-item-height: var(--kbq-size-xxl);
                 @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
             }
         }
-
-        .kbq-breadcrumb__expand {
-            &.kbq-button-icon {
-                --kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs);
-            }
-        }
     }
 
     &.kbq-breadcrumbs_normal {
         .kbq-breadcrumb-item {
             &.kbq-button,
             &.kbq-button-icon {
-                --kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);
-
                 @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);
             }
         }
@@ -138,10 +182,20 @@
     &.kbq-breadcrumbs_big {
         .kbq-button,
         .kbq-button-icon {
-            --kbq-button-size-height: var(--kbq-breadcrumb-item-height);
             @include tokens.kbq-typography-level-to-styles-css-variables(typography, subheading);
         }
     }
+
+    .kbq-breadcrumb__separator {
+        @include vendor-prefixes.user-select(none);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);
+    }
+}
+
+.kbq-breadcrumbs {
+    @include _kbq-breadcrumbs-geometry();
+    @include _kbq-breadcrumbs-theme();
+    @include _kbq-breadcrumbs-typography();
 }
 
 .kbq-breadcrumb-item__link-behavior {

package/button/button-tokens.scss

@@ -4,7 +4,7 @@
     --kbq-button-size-border-width: var(--kbq-size-border-width);
     --kbq-button-size-border-radius: var(--kbq-size-border-radius);
     --kbq-button-size-horizontal-padding: var(--kbq-size-m);
-    --kbq-button-size-content-padding: var(--kbq-size-s);
+    --kbq-button-size-content-padding: var(--kbq-size-xs);
     --kbq-button-icon-size-horizontal-padding: var(--kbq-size-s);
     --kbq-button-icon-size-vertical-padding: var(--kbq-size-s);
     --kbq-button-icon-size-content-padding: var(--kbq-size-xxs);

package/button/button.scss

@@ -1,5 +1,6 @@
-@use 'button-base' as *;
+@use '../core/styles/common/animation';
 
+@use 'button-base' as *;
 @use '../core/styles/common/tokens' as *;
 
 @use './button-theme' as *;
@@ -10,20 +11,6 @@
     // base padding - border-width
     padding-left: kbq-difference-series-css-variables([button-size-horizontal-padding, button-size-border-width]);
     padding-right: kbq-difference-series-css-variables([button-size-horizontal-padding, button-size-border-width]);
-
-    &.kbq-button-icon_left {
-        padding-left: kbq-difference-series-css-variables(
-            [button-icon-size-horizontal-padding,
-            button-size-border-width]
-        );
-    }
-
-    &.kbq-button-icon_right {
-        padding-right: kbq-difference-series-css-variables(
-            [button-icon-size-horizontal-padding,
-            button-size-border-width]
-        );
-    }
 }
 
 .kbq-light-button {

package/checkbox/checkbox-tokens.scss

@@ -5,12 +5,14 @@
     --kbq-checkbox-size-normal-horizontal-content-padding: var(--kbq-size-s);
     --kbq-checkbox-size-normal-vertical-content-padding: var(--kbq-size-3xs);
     --kbq-checkbox-size-normal-top: var(--kbq-size-3xs);
+    --kbq-checkbox-size-normal-margin-bottom: var(--kbq-size-s);
     --kbq-checkbox-size-big-width: var(--kbq-size-l);
     --kbq-checkbox-size-big-border-width: var(--kbq-size-border-width);
     --kbq-checkbox-size-big-border-radius: var(--kbq-size-xxs);
     --kbq-checkbox-size-big-horizontal-content-padding: var(--kbq-size-s);
     --kbq-checkbox-size-big-vertical-content-padding: var(--kbq-size-3xs);
     --kbq-checkbox-size-big-top: var(--kbq-size-xxs);
+    --kbq-checkbox-size-big-margin-bottom: var(--kbq-size-m);
     /* THEME TOKENS */
     --kbq-checkbox-theme-default-border: var(--kbq-line-contrast-fade);
     --kbq-checkbox-theme-default-color: var(--kbq-icon-white);

package/checkbox/checkbox.scss

@@ -1,8 +1,4 @@
-@use '../core/styles/common/visually-hidden';
-@use '../core/styles/common/layout';
-
 @use '../core/styles/common/tokens' as *;
-
 @use './checkbox-theme' as *;
 
 .kbq-checkbox-checkmark,
@@ -68,6 +64,8 @@
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
 
+    margin-bottom: var(--kbq-checkbox-size-normal-margin-bottom);
+
     &.kbq-checked {
         .kbq-checkbox-checkmark {
             display: block;
@@ -102,6 +100,8 @@
 }
 
 .kbq-checkbox.kbq-checkbox_big {
+    margin-bottom: var(--kbq-checkbox-size-big-margin-bottom);
+
     & .kbq-checkbox__layout {
         padding-left: kbq-sum-series-css-variables(
             [ checkbox-size-normal-width,

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

@@ -3,7 +3,8 @@ import { DateFormatter as BaseDateFormatter } from '@koobiq/date-formatter';
 import * as i0 from "@angular/core";
 export declare class DateFormatter<D> extends BaseDateFormatter<D> {
     readonly adapter: DateAdapter<D>;
-    constructor(adapter: DateAdapter<D>, locale: string);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DateFormatter<any>, never>;
+    protected localeService?: any;
+    constructor(adapter: DateAdapter<D>, locale: string, localeService?: any);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateFormatter<any>, [null, null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DateFormatter<any>>;
 }

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

@@ -906,6 +906,10 @@ export declare class KbqLocaleService {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqLocaleService, [{ optional: true; }, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqLocaleService>;
 }
+export declare function numberByParts(value: string, fractionSeparator: string, groupSeparator: string): {
+    integer: string;
+    fraction: string;
+};
 /**
  * Function that returns a string representation of a number without localized separators
  */
@@ -916,4 +920,4 @@ export declare function normalizeNumber(value: string | null | undefined, custom
 /**
  * Function that parse string and return a number. The string can be in any locale.
  */
-export declare function checkAndNormalizeLocalizedNumber(num: string | null | undefined): number | null;
+export declare function checkAndNormalizeLocalizedNumber(num: string | null | undefined, locale?: string): number | null;

package/core/styles/theming/scrollbar-tokens.scss

@@ -1,4 +1,4 @@
-.kbq-scrollbar {
+:where(.kbq-scrollbar) {
     --kbq-scrollbar-size-track-dimension: var(--kbq-size-l);
     --kbq-scrollbar-size-track-padding-vertical: var(--kbq-size-3xs);
     --kbq-scrollbar-size-track-padding-horizontal: var(--kbq-size-3xs);
@@ -6,9 +6,9 @@
     --kbq-scrollbar-size-thumb-min-size: var(--kbq-size-xl);
     --kbq-scrollbar-size-thumb-border-radius: var(--kbq-size-s);
     /* THEME TOKENS */
-    --kbq-scrollbar-thumb-default-background: var(--kbq-icon-contrast-fade);
-    --kbq-scrollbar-thumb-hover-background: var(--kbq-states-icon-contrast-fade-hover);
-    --kbq-scrollbar-thumb-active-background: var(--kbq-states-icon-contrast-fade-active);
+    --kbq-scrollbar-thumb-default-background: var(--kbq-palette-grey-50-a32);
+    --kbq-scrollbar-thumb-hover-background: var(--kbq-palette-grey-50-a48);
+    --kbq-scrollbar-thumb-active-background: var(--kbq-palette-grey-20-a55);
     --kbq-scrollbar-thumb-disabled-background: var(--kbq-states-icon-disabled);
     --kbq-scrollbar-track-default-border: transparent;
     --kbq-scrollbar-track-default-background: transparent;
@@ -17,3 +17,9 @@
     --kbq-scrollbar-track-active-border: transparent;
     --kbq-scrollbar-track-active-background: transparent;
 }
+
+:where(.kbq-dark .kbq-scrollbar) {
+    --kbq-scrollbar-thumb-default-background: var(--kbq-palette-grey-50-a48);
+    --kbq-scrollbar-thumb-hover-background: var(--kbq-palette-grey-50-a60);
+    --kbq-scrollbar-thumb-active-background: var(--kbq-palette-grey-50-a80);
+}

package/dropdown/dropdown.scss

@@ -1,12 +1,27 @@
 @use './dropdown-theme' as *;
 
-.kbq-dropdown-trigger.kbq-button-icon_right.kbq-button-icon_left {
-    & .kbq-icon_left {
-        margin-right: 2px;
+.kbq-dropdown-trigger {
+    &.kbq-button {
+        padding-left: calc(10px - var(--kbq-size-border-width));
+        padding-right: calc(10px - var(--kbq-size-border-width));
+
+        & .kbq-icon_left {
+            margin-right: var(--kbq-size-xs);
+        }
+
+        & .kbq-icon_right {
+            margin-left: var(--kbq-size-3xs);
+        }
     }
 
-    & .kbq-icon_right {
-        margin-left: 2px;
+    &.kbq-button-icon.kbq-button-icon_right.kbq-button-icon_left {
+        & .kbq-icon_left {
+            margin-right: 0;
+        }
+
+        & .kbq-icon_right {
+            margin-left: 0;
+        }
     }
 }