@koobiq/components 18.19.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/option/option-tokens.scss

@@ -1,10 +1,14 @@
 @use '../../list/list-tokens';
 
-.kbq-option {
+%kbq-option-geometry-tokens {
     --kbq-option-size-horizontal-padding: var(--kbq-size-m);
     --kbq-option-size-height: var(--kbq-size-3xl);
     --kbq-option-size-border-width: 2px;
     --kbq-option-border-radius: var(--kbq-size-xs);
+}
+
+.kbq-option {
+    @extend %kbq-option-geometry-tokens;
     /* LIST THEME TOKENS */
     @include list-tokens.list-theme-tokens;
 }

package/core/option/option.scss

@@ -1,9 +1,11 @@
-@use '../styles/common';
-
+@use '../styles/common/list';
+@use '../styles/common/vendor-prefixes';
 @use './option-theme' as *;
 
 .kbq-option {
-    @include common.kbq-list-item-base();
+    @include list.kbq-list-item-base();
+    @include vendor-prefixes.user-select(none);
+
     border-radius: var(--kbq-option-border-radius);
 
     &:not(.kbq-disabled) {
@@ -12,7 +14,7 @@
 }
 
 .kbq-option-text {
-    @include common.kbq-list-text();
+    @include list.kbq-list-text();
 }
 
 @include kbq-option-theme();

package/core/styles/common/_list.scss

@@ -1,5 +1,6 @@
 @use '../tokens';
 @use './tokens' as *;
+@use './vendor-prefixes';
 
 // This mixin will ensure that lines that overflow the container will hide the overflow and
 // truncate neatly with an ellipsis.
@@ -36,14 +37,6 @@
     }
 }
 
-@mixin kbq-no-select() {
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
-}
-
 @mixin kbq-list-text() {
     @include kbq-line-wrapper-base();
     display: inline-block;
@@ -121,5 +114,5 @@
 }
 
 .kbq-no-select {
-    @include kbq-no-select;
+    @include vendor-prefixes.user-select(none);
 }

package/core/styles/common/_select.scss

@@ -11,6 +11,8 @@
     outline: none;
 
     .kbq-select__matcher {
+        @include vendor-prefixes.user-select(none);
+
         display: flex;
         align-items: center;
 
@@ -145,6 +147,8 @@
     }
 
     .kbq-select__no-options-message {
+        @include vendor-prefixes.user-select(none);
+
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -180,6 +184,8 @@
 }
 
 %kbq-select-footer {
+    @include vendor-prefixes.user-select(none);
+
     display: flex;
     align-items: center;
     box-sizing: border-box;

package/core/styles/common/_tokens.scss

@@ -78,7 +78,7 @@ $tokens: meta.module-variables(tokens) !default;
         @if (meta.type-of($border) == number or meta.type-of($border) == calculation) {
             @return calc((var(--kbq-#{$outer}) - var(--kbq-#{$inner}) - $border * 2) / 2);
         } @else {
-            @return calc((var(--kbq-#{$outer}) - var(--kbq-#{$inner}) - var(--kbq-#{$border} * 2)) / 2);
+            @return calc((var(--kbq-#{$outer}) - var(--kbq-#{$inner}) - var(--kbq-#{$border}) * 2) / 2);
         }
     } @else {
         @return calc((var(--kbq-#{$outer}) - var(--kbq-#{$inner})) / 2);

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/dl/dl.component.d.ts

@@ -9,6 +9,7 @@ export declare class KbqDlComponent implements AfterContentInit, OnDestroy {
     private readonly resizeDebounceInterval;
     private resizeSubscription;
     private readonly elementRef;
+    private readonly changeDetectorRef;
     ngAfterContentInit(): void;
     ngOnDestroy(): void;
     private readonly updateState;

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;
+        }
     }
 }