@koobiq/components 17.0.0-rc.1 → 17.0.0-rc.11

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/code-block/public-api.d.ts

@@ -1,3 +1,3 @@
+export * from './code-block.component';
 export * from './code-block.module';
 export * from './code-block.types';
-export * from './code-block.component';

package/core/animation/index.d.ts

@@ -1,3 +1,3 @@
-export { fadeAnimation } from './fade-animations';
 export * from './animation';
+export { fadeAnimation } from './fade-animations';
 export { kbqSelectAnimations } from './select-animations';

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

@@ -1,7 +1,7 @@
 import { InjectionToken } from '@angular/core';
-export { KbqCommonModule, KBQ_SANITY_CHECKS } from './common-module';
+export { CanColor, CanColorCtor, KbqComponentColors, ThemePalette, mixinColor } from './color';
+export { KBQ_SANITY_CHECKS, KbqCommonModule } from './common-module';
 export { CanDisable, CanDisableCtor, mixinDisabled } from './disabled';
-export { CanColor, CanColorCtor, mixinColor, ThemePalette, KbqComponentColors } from './color';
+export { CanUpdateErrorState, CanUpdateErrorStateCtor, mixinErrorState } from './error-state';
 export { HasTabIndex, HasTabIndexCtor, mixinTabIndex } from './tabindex';
-export { CanUpdateErrorStateCtor, CanUpdateErrorState, mixinErrorState } from './error-state';
 export declare const KBQ_PARENT_ANIMATION_COMPONENT: InjectionToken<any>;

package/core/datetime/index.d.ts

@@ -1,2 +1,2 @@
-export * from './date-formats';
 export * from './date-adapter';
+export * from './date-formats';

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/formatters/index.d.ts

@@ -6,6 +6,6 @@ export declare class KbqFormattersModule {
     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], never, [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]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqFormattersModule>;
 }
-export * from './number/formatter';
 export * from './date/formatter';
 export * from './date/formatter.pipe';
+export * from './number/formatter';

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/forms/index.d.ts

@@ -1,2 +1,2 @@
-export * from './forms.directive';
 export * from './forms-module';
+export * from './forms.directive';

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

@@ -4,6 +4,6 @@ export * from './fa-IR';
 export * from './pt-BR';
 export * from './ru-RU';
 export * from './zh-CN';
+export * from './formatters';
 export * from './locale-service';
 export * from './locale-service.module';
-export * from './formatters';