@koobiq/components 17.0.0-beta.2 → 17.0.0-rc.10

package/code-block/code-block.scss

@@ -1,11 +1,13 @@
 @use 'sass:meta';
 @use 'sass:map';
 @use '../core/styles/tokens';
+@use '../core/styles/common/tokens' as *;
 
 $tokens: meta.module-variables(tokens) !default;
 
+$border-radius: kbq-css-variable(code-block-size-container-border-radius);
+$border-width: kbq-css-variable(code-block-size-container-border-width);
 
-/* stylelint-disable no-descending-specificity */
 .kbq-code-block {
     display: block;
     position: relative;
@@ -18,61 +20,51 @@ $tokens: meta.module-variables(tokens) !default;
     -moz-hyphens: none;
     -webkit-hyphens: none;
 
-    border-width: var(
-        --kbq-code-block-size-container-border-width, map.get($tokens, code-block-size-container-border-width)
-    );
-    border-style: solid;
-    border-radius: var(
-        --kbq-code-block-size-container-border-radius, map.get($tokens, code-block-size-container-border-radius)
-    );
+    border-radius: $border-radius;
+    border-width: 0;
 
     .kbq-tab-header {
         // 4 buttons + margin
         $buttons-margin: calc(32 * 4) + 24px;
 
-        padding:
-            var(
-                --kbq-code-block-size-header-padding-vertical,
-                map.get($tokens, code-block-size-header-padding-vertical)
+        padding: kbq-css-variable(code-block-size-header-padding-vertical)
+            calc(
+                var(--kbq-code-block-size-header-padding-right, map.get($tokens, code-block-size-header-padding-right)) +
+                    $buttons-margin
             )
-            calc(var(
-                --kbq-code-block-size-header-padding-right,
-                map.get($tokens, code-block-size-header-padding-right)
-            ) + $buttons-margin)
-            var(
-                --kbq-code-block-size-header-padding-vertical,
-                map.get($tokens, code-block-size-header-padding-vertical)
-            ) var(
-                --kbq-code-block-size-header-padding-left,
-                map.get($tokens, code-block-size-header-padding-left)
-            );
+            kbq-css-variable(code-block-size-header-padding-vertical)
+            kbq-css-variable(code-block-size-header-padding-left);
+
+        border-width: $border-width $border-width 0 $border-width;
+        border-style: solid;
+        border-radius: $border-radius $border-radius 0 0;
+    }
+
+    &:has(.kbq-code-block__show-more) {
+        .kbq-code-block__code {
+            & > code {
+                padding-bottom: kbq-css-variable(size-3xl) !important;
+                overflow-x: scroll;
+            }
+        }
     }
 
     .kbq-code-block__code {
         > code {
-            padding:
-                var(
-                    --kbq-code-block-size-with-header-content-padding-top,
-                    map.get($tokens, code-block-size-with-header-content-padding-top)
-                )
-                var(
-                    --kbq-code-block-size-with-header-content-padding-horizontal,
-                    map.get($tokens, code-block-size-with-header-content-padding-horizontal)
-                )
-                var(
-                    --kbq-code-block-size-with-header-content-padding-bottom,
-                    map.get($tokens, code-block-size-with-header-content-padding-bottom)
-                ) var(
-                    --kbq-code-block-size-with-header-content-padding-horizontal,
-                    map.get($tokens, code-block-size-with-header-content-padding-horizontal)
-                );
+            padding: kbq-css-variable(code-block-size-with-header-content-padding-top)
+                kbq-css-variable(code-block-size-with-header-content-padding-horizontal)
+                kbq-css-variable(code-block-size-with-header-content-padding-bottom)
+                kbq-css-variable(code-block-size-with-header-content-padding-horizontal);
+
+            border-radius: $border-radius;
+
+            &:focus-visible {
+                outline: none;
+            }
         }
 
         .hljs-ln-numbers {
-            padding-right: var(
-                --kbq-code-block-size-with-header-content-content-gap-horizontal,
-                map.get($tokens, code-block-size-with-header-content-content-gap-horizontal)
-            );
+            padding-right: kbq-css-variable(code-block-size-with-header-content-content-gap-horizontal);
         }
     }
 
@@ -92,31 +84,32 @@ $tokens: meta.module-variables(tokens) !default;
         }
     }
 
+    &:not(.kbq-code-block_no-header) {
+        .kbq-tab-body__wrapper {
+            border-top-width: 0;
+        }
+    }
+
     &.kbq-code-block_no-header {
         .kbq-tab-header {
             display: none;
         }
 
+        .kbq-tab-body__wrapper {
+            border-width: $border-width;
+            border-radius: $border-radius;
+        }
+
         .kbq-code-block__code {
             position: relative;
 
             & > code {
-                padding:
-                    var(
-                        --kbq-code-block-size-no-header-content-padding-vertical,
-                        map.get($tokens, code-block-size-no-header-content-padding-vertical)
-                    )
-                    var(
-                        --kbq-code-block-size-no-header-content-padding-horizontal,
-                        map.get($tokens, code-block-size-no-header-content-padding-horizontal)
-                    );
+                padding: kbq-css-variable(code-block-size-no-header-content-padding-vertical)
+                    kbq-css-variable(code-block-size-no-header-content-padding-horizontal);
             }
 
             .hljs-ln-numbers {
-                padding-right: var(
-                    --kbq-code-block-size-no-header-content-content-gap-horizontal,
-                    map.get($tokens, code-block-size-no-header-content-content-gap-horizontal)
-                );
+                padding-right: kbq-css-variable(code-block-size-no-header-content-content-gap-horizontal);
             }
         }
     }
@@ -134,6 +127,10 @@ $tokens: meta.module-variables(tokens) !default;
     .kbq-tab-body__wrapper {
         flex-direction: column;
         position: unset;
+
+        border-width: $border-width;
+        border-style: solid;
+        border-radius: 0 0 $border-radius $border-radius;
     }
 
     .kbq-tab-body.kbq-tab-body__active {
@@ -150,7 +147,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 
     &.kbq-code-block__code_soft-wrap {
-        white-space: pre-wrap
+        white-space: pre-wrap;
     }
 
     .hljs-ln {
@@ -176,37 +173,25 @@ $tokens: meta.module-variables(tokens) !default;
     justify-content: center;
     overflow: hidden;
 
-    width: 100%;
+    width: calc(100% - $border-width * 2);
 
     position: absolute;
-    bottom: 0;
+    bottom: $border-width;
+    border-radius: $border-radius;
 
     &.kbq-code-block__show-more_collapsed {
-        padding-top: var(
-            --kbq-code-block-size-collapse-collapsed-padding-top,
-            map.get($tokens, code-block-size-collapse-collapsed-padding-top)
-        );
+        padding-top: kbq-css-variable(code-block-size-collapse-collapsed-padding-top);
 
-        padding-bottom: var(
-            --kbq-code-block-size-collapse-collapsed-padding-bottom,
-            map.get($tokens, code-block-size-collapse-collapsed-padding-bottom)
-        );
+        padding-bottom: kbq-css-variable(code-block-size-collapse-collapsed-padding-bottom);
     }
 
     &.kbq-code-block__show-more_expanded {
-        padding-top: var(
-            --kbq-code-block-size-collapse-expanded-padding-top,
-            map.get($tokens, code-block-size-collapse-expanded-padding-top)
-        );
+        padding-top: kbq-css-variable(code-block-size-collapse-expanded-padding-top);
 
-        margin-bottom: var(
-            --kbq-code-block-size-collapse-expanded-padding-bottom,
-            map.get($tokens, code-block-size-collapse-expanded-padding-bottom)
-        );
+        margin-bottom: kbq-css-variable(code-block-size-collapse-expanded-padding-bottom);
     }
 
     .bg-wrapper {
-        border-radius: var(--kbq-button-size-border-radius, map.get($tokens, button-size-border-radius));
+        border-radius: kbq-css-variable(button-size-border-radius);
     }
 }
-/* stylelint-enable no-descending-specificity */

package/core/form-field/form-field-ref.d.ts

@@ -1,7 +1,9 @@
 import { InjectionToken } from '@angular/core';
 export interface KbqFormFieldRef {
     control: any;
+    canCleanerClearByEsc: boolean;
     shouldForward(str: string): boolean;
+    focusViaKeyboard(): void;
 }
 /**
  * Injection token that can be used to inject an instances of `KbqFormField`. It serves

package/core/forms/_forms-theme.scss

@@ -3,29 +3,25 @@
 
 @use '../styles/typography/typography-utils' as *;
 @use './forms' as *;
-
+@use '../styles/common/tokens' as *;
 
 @mixin kbq-forms-theme($theme) {
     @include kbq-form-geometry(map.get($theme, tokens));
 
-    $foreground: map.get($theme, foreground);
-
     $forms: map.get(map.get($theme, components), forms);
 
     .kbq-form__label {
-        color: map.get($forms, label);
+        color: kbq-css-variable(forms-label, map.get($forms, label));
     }
 
     .kbq-form__legend {
-        color: map.get($forms, legend);
+        color: kbq-css-variable(forms-legend, map.get($forms, legend));
     }
 }
 
 @mixin kbq-forms-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-form__label {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, forms-font-label));
+        @include kbq-typography-css-variables(forms, label);
     }
 
     //.kbq-form__legend {

package/core/forms/_forms.scss

@@ -4,7 +4,7 @@
 @use '../styles/common/vendor-prefixes';
 @use '../styles/typography/typography' as *;
 @use '../styles/typography/typography-utils' as *;
-
+@use '../styles/common/tokens' as *;
 
 @mixin kbq-form-geometry($tokens) {
     .kbq-form {
@@ -18,41 +18,26 @@
     }
 
     .kbq-form-horizontal {
-        $config: kbq-typography-config($tokens);
-
-        $line-height: kbq-line-height($config, map.get($tokens, forms-font-label));
+        $line-height: map.get($tokens, forms-font-label-line-height);
         $form-field-size-height: map.get($tokens, form-field-size-height);
-        $label-padding-top: calc(($form-field-size-height - $line-height) / 2);
 
         & .kbq-form-row_margin {
-            margin-bottom: var(
-                --kbq-forms-size-horizontal-row-margin-bottom,
-                #{map.get($tokens, forms-size-horizontal-row-margin-bottom)}
-            );
+            margin-bottom: kbq-css-variable(forms-size-horizontal-row-margin-bottom);
         }
 
         & .kbq-form__label {
-            padding-top: var(--kbq-forms-size-horizontal-label-padding-top, #{$label-padding-top});
+            padding-top: calc(($form-field-size-height - $line-height) / 2);
 
             text-align: start;
         }
 
         & .kbq-form__control {
-            padding-left: var(
-                --kbq-forms-size-horizontal-control-padding-left,
-                #{map.get($tokens, forms-size-horizontal-control-padding-left)}
-            );
+            padding-left: kbq-css-variable(forms-size-horizontal-control-padding-left);
         }
 
         & .kbq-form__legend {
-            margin-top: var(
-                --kbq-forms-size-horizontal-legend-margin-top,
-                #{map.get($tokens, forms-size-horizontal-legend-margin-top)}
-            );
-            margin-bottom: var(
-                --kbq-forms-size-horizontal-legend-margin-bottom,
-                #{map.get($tokens, forms-size-horizontal-legend-margin-bottom)}
-            );
+            margin-top: kbq-css-variable(forms-size-horizontal-legend-margin-top);
+            margin-bottom: kbq-css-variable(forms-size-horizontal-legend-margin-bottom);
         }
     }
 
@@ -62,19 +47,12 @@
         }
 
         & .kbq-form-row_margin {
-            margin-bottom: var(
-                --kbq-forms-size-vertical-row-margin-bottom, #{map.get($tokens, forms-size-vertical-row-margin-bottom)}
-            );
+            margin-bottom: kbq-css-variable(forms-size-vertical-row-margin-bottom);
         }
 
         & .kbq-form__label {
-            padding-top: var(
-                --kbq-forms-size-vertical-label-padding-top, #{map.get($tokens, forms-size-vertical-label-padding-top)}
-            );
-            padding-bottom: var(
-                --kbq-forms-size-vertical-label-padding-bottom,
-                #{map.get($tokens, forms-size-vertical-label-padding-bottom)}
-            );
+            padding-top: kbq-css-variable(forms-size-vertical-label-padding-top);
+            padding-bottom: kbq-css-variable(forms-size-vertical-label-padding-bottom);
 
             text-align: start;
         }
@@ -84,13 +62,8 @@
         }
 
         & .kbq-form__legend {
-            margin-top: var(
-                --kbq-forms-size-vertical-legend-margin-top, #{map.get($tokens, forms-size-vertical-legend-margin-top)}
-            );
-            margin-bottom: var(
-                --kbq-forms-size-vertical-legend-margin-bottom,
-                #{map.get($tokens, forms-size-vertical-legend-margin-bottom)}
-            );
+            margin-top: kbq-css-variable(forms-size-vertical-legend-margin-top);
+            margin-bottom: kbq-css-variable(forms-size-vertical-legend-margin-bottom);
         }
     }
 
@@ -103,10 +76,7 @@
         flex-direction: row;
 
         & .kbq-form__row:not(:first-child) {
-            padding-left: var(
-                --kbq-forms-size-vertical-control-padding-left,
-                #{map.get($tokens, forms-size-vertical-control-padding-left)}
-            );
+            padding-left: kbq-css-variable(forms-size-vertical-control-padding-left);
         }
     }
 }

package/core/locales/formatters.d.ts

@@ -17,6 +17,22 @@ export declare const enUSFormattersData: {
             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 esLAFormattersData: {
     formatters: {
@@ -37,6 +53,22 @@ export declare const esLAFormattersData: {
             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 faIRFormattersData: {
     formatters: {
@@ -58,6 +90,22 @@ export declare const faIRFormattersData: {
             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: {
@@ -78,6 +126,22 @@ export declare const ptBRFormattersData: {
             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 ruRUFormattersData: {
     formatters: {
@@ -99,6 +163,22 @@ export declare const ruRUFormattersData: {
             startFormattingFrom: number;
         };
     };
+    sizeUnits: {
+        defaultUnitSystem: string;
+        defaultPrecision: number;
+        unitSystems: {
+            SI: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+            IEC: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+        };
+    };
 };
 export declare const zhCNFormattersData: {
     formatters: {
@@ -118,4 +198,20 @@ export declare const zhCNFormattersData: {
             fractionSeparator: string;
         };
     };
+    sizeUnits: {
+        defaultUnitSystem: string;
+        defaultPrecision: number;
+        unitSystems: {
+            SI: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+            IEC: {
+                abbreviations: string[];
+                base: number;
+                power: number;
+            };
+        };
+    };
 };

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

@@ -27,6 +27,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 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;
         };
@@ -76,6 +92,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 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;
         };
@@ -125,6 +157,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 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;
         };
@@ -174,6 +222,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 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;
         };
@@ -224,6 +288,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 startFormattingFrom: number;
             };
         };
+        sizeUnits: {
+            defaultUnitSystem: string;
+            defaultPrecision: number;
+            unitSystems: {
+                SI: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+                IEC: {
+                    abbreviations: string[];
+                    base: number;
+                    power: number;
+                };
+            };
+        };
         select: {
             hiddenItemsText: string;
         };
@@ -275,6 +355,22 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 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;
         };
@@ -311,6 +407,7 @@ export declare const KBQ_LOCALE_SERVICE: InjectionToken<KbqLocaleService>;
 export declare class KbqLocaleService {
     readonly changes: BehaviorSubject<string>;
     readonly locales: any;
+    private readonly document;
     id: string;
     current: any;
     constructor(id: string, localeData: any);

package/core/option/_optgroup-theme.scss

@@ -2,24 +2,22 @@
 @use 'sass:map';
 
 @use '../styles/typography/typography-utils' as *;
-
+@use '../styles/common/tokens' as *;
 
 @mixin kbq-optgroup-theme($theme) {
     $foreground: map.get($theme, foreground);
 
     .kbq-optgroup-label {
-        color: map.get($foreground, contrast);
+        color: kbq-css-variable(foreground-contrast, map.get($foreground, contrast));
     }
 
     .kbq-disabled .kbq-optgroup-label {
-        color: map.get($foreground, text-disabled);
+        color: kbq-css-variable(foreground-text-disabled, map.get($foreground, text-disabled));
     }
 }
 
 @mixin kbq-optgroup-typography($config) {
-    $tokens: map.get($config, tokens);
-
     .kbq-optgroup-label {
-        @include kbq-typography-level-to-styles($config, map.get($tokens, optgroup-font-default));
+        @include kbq-typography-css-variables(optgroup, default);
     }
 }