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

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

@@ -4,12 +4,35 @@ import * as i0 from "@angular/core";
 export declare const KBQ_LOCALE_ID: InjectionToken<string>;
 export declare const KBQ_DEFAULT_LOCALE_ID = "ru-RU";
 export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
-    'zh-CN': {
+    items: {
+        id: string;
+        name: string;
+    }[];
+    'en-US': {
+        formatters: {
+            number: {
+                rounding: {
+                    separator: string;
+                    groupSeparator: string;
+                    thousand: string;
+                    million: string;
+                    billion: string;
+                    trillion: string;
+                };
+            };
+        };
+        input: {
+            number: {
+                groupSeparator: string[];
+                fractionSeparator: string;
+            };
+        };
         select: {
             hiddenItemsText: string;
         };
         datepicker: {
             placeholder: string;
+            dateInput: string;
         };
         timepicker: {
             placeholder: {
@@ -17,6 +40,25 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 short: string;
             };
         };
+        fileUpload: {
+            single: {
+                captionText: string;
+                browseLink: string;
+            };
+            multiple: {
+                captionText: string;
+                captionTextWhenSelected: string;
+                captionTextForCompactSize: string;
+                browseLink: string;
+                title: string;
+                gridHeaders: {
+                    file: string;
+                    size: string;
+                };
+            };
+        };
+    };
+    'zh-CN': {
         formatters: {
             number: {
                 rounding: {
@@ -34,8 +76,6 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 fractionSeparator: string;
             };
         };
-    };
-    'pt-BR': {
         select: {
             hiddenItemsText: string;
         };
@@ -48,6 +88,25 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 short: string;
             };
         };
+        fileUpload: {
+            single: {
+                captionText: string;
+                browseLink: string;
+            };
+            multiple: {
+                captionText: string;
+                captionTextWhenSelected: string;
+                captionTextForCompactSize: string;
+                browseLink: string;
+                title: string;
+                gridHeaders: {
+                    file: string;
+                    size: string;
+                };
+            };
+        };
+    };
+    'es-LA': {
         formatters: {
             number: {
                 rounding: {
@@ -66,8 +125,6 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 fractionSeparator: string;
             };
         };
-    };
-    'fa-IR': {
         select: {
             hiddenItemsText: string;
         };
@@ -80,6 +137,25 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 short: string;
             };
         };
+        fileUpload: {
+            single: {
+                captionText: string;
+                browseLink: string;
+            };
+            multiple: {
+                captionText: string;
+                captionTextWhenSelected: string;
+                captionTextForCompactSize: string;
+                browseLink: string;
+                title: string;
+                gridHeaders: {
+                    file: string;
+                    size: string;
+                };
+            };
+        };
+    };
+    'pt-BR': {
         formatters: {
             number: {
                 rounding: {
@@ -89,7 +165,6 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                     million: string;
                     billion: string;
                     trillion: string;
-                    rtl: boolean;
                 };
             };
         };
@@ -99,8 +174,6 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 fractionSeparator: string;
             };
         };
-    };
-    'es-LA': {
         select: {
             hiddenItemsText: string;
         };
@@ -113,6 +186,25 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 short: string;
             };
         };
+        fileUpload: {
+            single: {
+                captionText: string;
+                browseLink: string;
+            };
+            multiple: {
+                captionText: string;
+                captionTextWhenSelected: string;
+                captionTextForCompactSize: string;
+                browseLink: string;
+                title: string;
+                gridHeaders: {
+                    file: string;
+                    size: string;
+                };
+            };
+        };
+    };
+    'ru-RU': {
         formatters: {
             number: {
                 rounding: {
@@ -129,10 +221,9 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
             number: {
                 groupSeparator: string[];
                 fractionSeparator: string;
+                startFormattingFrom: number;
             };
         };
-    };
-    'en-US': {
         select: {
             hiddenItemsText: string;
         };
@@ -140,6 +231,31 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
             placeholder: string;
             dateInput: string;
         };
+        timepicker: {
+            placeholder: {
+                full: string;
+                short: string;
+            };
+        };
+        fileUpload: {
+            single: {
+                captionText: string;
+                browseLink: string;
+            };
+            multiple: {
+                captionText: string;
+                captionTextWhenSelected: string;
+                captionTextForCompactSize: string;
+                browseLink: string;
+                title: string;
+                gridHeaders: {
+                    file: string;
+                    size: string;
+                };
+            };
+        };
+    };
+    'fa-IR': {
         formatters: {
             number: {
                 rounding: {
@@ -149,6 +265,7 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                     million: string;
                     billion: string;
                     trillion: string;
+                    rtl: boolean;
                 };
             };
         };
@@ -158,39 +275,36 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
                 fractionSeparator: string;
             };
         };
-    };
-    'ru-RU': {
         select: {
             hiddenItemsText: string;
         };
         datepicker: {
             placeholder: string;
-            dateInput: string;
         };
-        formatters: {
-            number: {
-                rounding: {
-                    separator: string;
-                    groupSeparator: string;
-                    thousand: string;
-                    million: string;
-                    billion: string;
-                    trillion: string;
-                };
+        timepicker: {
+            placeholder: {
+                full: string;
+                short: string;
             };
         };
-        input: {
-            number: {
-                groupSeparator: string[];
-                fractionSeparator: string;
-                startFormattingFrom: number;
+        fileUpload: {
+            single: {
+                captionText: string;
+                browseLink: string;
+            };
+            multiple: {
+                captionText: string;
+                captionTextWhenSelected: string;
+                captionTextForCompactSize: string;
+                browseLink: string;
+                title: string;
+                gridHeaders: {
+                    file: string;
+                    size: string;
+                };
             };
         };
     };
-    items: {
-        id: string;
-        name: string;
-    }[];
 };
 export declare const KBQ_LOCALE_DATA: InjectionToken<any>;
 export declare const KBQ_LOCALE_SERVICE: InjectionToken<KbqLocaleService>;

package/core/locales/pt-BR.d.ts

@@ -1,33 +1,30 @@
 export declare const ptBRLocaleData: {
-    'pt-BR': {
-        select: {
-            hiddenItemsText: string;
-        };
-        datepicker: {
-            placeholder: string;
-        };
-        timepicker: {
-            placeholder: {
-                full: string;
-                short: string;
-            };
+    select: {
+        hiddenItemsText: string;
+    };
+    datepicker: {
+        placeholder: string;
+    };
+    timepicker: {
+        placeholder: {
+            full: string;
+            short: string;
         };
-        formatters: {
-            number: {
-                rounding: {
-                    separator: string;
-                    groupSeparator: string;
-                    thousand: string;
-                    million: string;
-                    billion: string;
-                    trillion: string;
-                };
-            };
+    };
+    fileUpload: {
+        single: {
+            captionText: string;
+            browseLink: string;
         };
-        input: {
-            number: {
-                groupSeparator: string[];
-                fractionSeparator: string;
+        multiple: {
+            captionText: string;
+            captionTextWhenSelected: string;
+            captionTextForCompactSize: string;
+            browseLink: string;
+            title: string;
+            gridHeaders: {
+                file: string;
+                size: string;
             };
         };
     };

package/core/locales/ru-RU.d.ts

@@ -1,29 +1,31 @@
 export declare const ruRULocaleData: {
-    'ru-RU': {
-        select: {
-            hiddenItemsText: string;
-        };
-        datepicker: {
-            placeholder: string;
-            dateInput: string;
+    select: {
+        hiddenItemsText: string;
+    };
+    datepicker: {
+        placeholder: string;
+        dateInput: string;
+    };
+    timepicker: {
+        placeholder: {
+            full: string;
+            short: string;
         };
-        formatters: {
-            number: {
-                rounding: {
-                    separator: string;
-                    groupSeparator: string;
-                    thousand: string;
-                    million: string;
-                    billion: string;
-                    trillion: string;
-                };
-            };
+    };
+    fileUpload: {
+        single: {
+            captionText: string;
+            browseLink: string;
         };
-        input: {
-            number: {
-                groupSeparator: string[];
-                fractionSeparator: string;
-                startFormattingFrom: number;
+        multiple: {
+            captionText: string;
+            captionTextWhenSelected: string;
+            captionTextForCompactSize: string;
+            browseLink: string;
+            title: string;
+            gridHeaders: {
+                file: string;
+                size: string;
             };
         };
     };

package/core/locales/zh-CN.d.ts

@@ -1,32 +1,30 @@
-export declare const znCNLocaleData: {
-    'zh-CN': {
-        select: {
-            hiddenItemsText: string;
-        };
-        datepicker: {
-            placeholder: string;
-        };
-        timepicker: {
-            placeholder: {
-                full: string;
-                short: string;
-            };
+export declare const zhCNLocaleData: {
+    select: {
+        hiddenItemsText: string;
+    };
+    datepicker: {
+        placeholder: string;
+    };
+    timepicker: {
+        placeholder: {
+            full: string;
+            short: string;
         };
-        formatters: {
-            number: {
-                rounding: {
-                    separator: string;
-                    groupSeparator: string;
-                    tenThousand: string;
-                    oneHundredMillions: string;
-                    trillion: string;
-                };
-            };
+    };
+    fileUpload: {
+        single: {
+            captionText: string;
+            browseLink: string;
         };
-        input: {
-            number: {
-                groupSeparator: string[];
-                fractionSeparator: string;
+        multiple: {
+            captionText: string;
+            captionTextWhenSelected: string;
+            captionTextForCompactSize: string;
+            browseLink: string;
+            title: string;
+            gridHeaders: {
+                file: string;
+                size: string;
             };
         };
     };

package/core/styles/_koobiq-theme.scss

@@ -3,7 +3,7 @@
 @use 'theming/theming' as *;
 @use 'typography/typography' as *;
 
-@use 'theming/scrollbars-theme' as *;
+@use 'theming/scrollbar-theme' as *;
 
 @use '../selection/pseudo-checkbox/pseudo-checkbox-theme' as *;
 @use '../../alert/alert-theme' as *;
@@ -37,6 +37,7 @@
 @use '../../risk-level/risk-level-theme' as *;
 @use '../../select/select-theme' as *;
 @use '../../sidepanel/sidepanel-theme' as *;
+@use '../../scrollbar/scrollbar-component-theme' as *;
 @use '../../splitter/splitter-theme' as *;
 @use '../../tabs/tabs-theme' as *;
 @use '../../tags/tag-theme' as *;
@@ -95,6 +96,7 @@
     @include kbq-radio-theme($theme);
     @include kbq-risk-level-theme($theme);
     @include kbq-scrollbar-theme($theme);
+    @include kbq-scrollbar-component-theme($theme);
     @include kbq-select-theme($theme);
     @include kbq-sidepanel-theme($theme);
     @include kbq-splitter-theme($theme);

package/core/styles/_variables.scss

@@ -1,10 +1 @@
-$z-index-modal-mask: 1000;
-$z-index-modal: 1000;
-$z-index-notification: 1010;
-$z-index-message: 1010;
-$z-index-popover: 1030;
-$z-index-picker: 1050;
-$z-index-dropdown: 1050;
-$z-index-tooltip: 1060;
-$z-index-toast: 1070;
 $z-index-loader-overlay: 10;

package/core/styles/common/_overlay.scss

@@ -41,6 +41,10 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
             // include overlays that have been detached, rather than disposed.
             display: none;
         }
+
+        &.cdk-overlay-container_dropdown {
+            z-index: calc($overlay-container-z-index - 1);
+        }
     }
 
     // We use an extra wrapper element in order to use make the overlay itself a flex item.

package/core/styles/theming/_components-theming.scss

@@ -321,6 +321,11 @@
                 text: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-active-text'),
                 icon: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-active-icon')
             ),
+            selected-disabled: (
+                background: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-disabled-background'),
+                text: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-disabled-text'),
+                icon: map-get($tokens, 'button-toggle-#{$scheme}-item-states-selected-disabled-icon')
+            ),
             disabled: (
                 background: map-get($tokens, 'button-toggle-#{$scheme}-item-states-disabled-background'),
                 text: map-get($tokens, 'button-toggle-#{$scheme}-item-states-disabled-text'),
@@ -436,10 +441,10 @@
             container: (
                 background: map-get($tokens, 'code-block-#{$scheme}-filled-container-background'),
                 border: map-get($tokens, 'code-block-#{$scheme}-filled-container-border-color'),
-                shadow: map-get($tokens, 'code-block-#{$scheme}-filled-container-shadow')
             ),
             header: (
-                background: map-get($tokens, 'code-block-#{$scheme}-filled-header-background')
+                background: map-get($tokens, 'code-block-#{$scheme}-filled-header-background'),
+                shadow: map-get($tokens, 'code-block-#{$scheme}-filled-header-shadow')
             ),
             actionbar: (
                 fade-gradient: map-get($tokens, 'code-block-#{$scheme}-filled-actionbar-fade-gradient'),
@@ -447,17 +452,20 @@
             ),
             collapse: (
                 expanded-background: map-get($tokens, 'code-block-#{$scheme}-filled-collapse-expanded-background'),
-                collapsed-background: map-get($tokens, 'code-block-#{$scheme}-filled-collapse-collapsed-background')
+                collapsed-background: map-get($tokens, 'code-block-#{$scheme}-filled-collapse-collapsed-background'),
+                button-expand-background: map-get(
+                    $tokens, 'code-block-#{$scheme}-filled-collapse-button-expand-background'
+                )
             )
         ),
         outline: (
             container: (
                 background: map-get($tokens, 'code-block-#{$scheme}-outline-container-background'),
                 border: map-get($tokens, 'code-block-#{$scheme}-outline-container-border-color'),
-                shadow: map-get($tokens, 'code-block-#{$scheme}-outline-container-shadow')
             ),
             header: (
-                background: map-get($tokens, 'code-block-#{$scheme}-outline-header-background')
+                background: map-get($tokens, 'code-block-#{$scheme}-outline-header-background'),
+                shadow: map-get($tokens, 'code-block-#{$scheme}-outline-header-shadow')
             ),
             actionbar: (
                 fade-gradient: map-get($tokens, 'code-block-#{$scheme}-outline-actionbar-fade-gradient'),
@@ -465,7 +473,10 @@
             ),
             collapse: (
                 expanded-background: map-get($tokens, 'code-block-#{$scheme}-outline-collapse-expanded-background'),
-                collapsed-background: map-get($tokens, 'code-block-#{$scheme}-outline-collapse-collapsed-background')
+                collapsed-background: map-get($tokens, 'code-block-#{$scheme}-outline-collapse-collapsed-background'),
+                button-expand-background: map-get(
+                    $tokens, 'code-block-#{$scheme}-outline-collapse-button-expand-background'
+                )
             )
         ),
 
@@ -500,6 +511,7 @@
             function-color: map-get($tokens, 'code-block-#{$scheme}-hljs-function-color'),
             keyword-background: map-get($tokens, 'code-block-#{$scheme}-hljs-keyword-background'),
             keyword-color: map-get($tokens, 'code-block-#{$scheme}-hljs-keyword-color'),
+            line-numbers-color: map-get($tokens, 'code-block-#{$scheme}-hljs-line-numbers-color'),
             link-background: map-get($tokens, 'code-block-#{$scheme}-hljs-link-background'),
             link-color: map-get($tokens, 'code-block-#{$scheme}-hljs-link-color'),
             literal-background: map-get($tokens, 'code-block-#{$scheme}-hljs-literal-background'),
@@ -1009,19 +1021,40 @@
 
     $navbar: (
         background: map-get($tokens, 'navbar-#{$scheme}-background'),
+        border: map-get($tokens, 'navbar-#{$scheme}-border'),
 
-        divider-background: map-get($tokens, 'navbar-#{$scheme}-divider-background')
-    );
-
-    $navbar-item: (
-        color: map-get($tokens, 'navbar-item-#{$scheme}-text'),
-        icon-color: map-get($tokens, 'navbar-item-#{$scheme}-icon'),
-
-        state-active: map-get($tokens, 'navbar-item-#{$scheme}-states-active'),
-        state-selected: map-get($tokens, 'navbar-item-#{$scheme}-states-selected'),
-        state-hover: map-get($tokens, 'navbar-item-#{$scheme}-states-hover'),
-        state-progress: map-get($tokens, 'navbar-item-#{$scheme}-states-progress'),
-        state-disabled-opacity: map-get($tokens, 'navbar-item-#{$scheme}-states-disabled-opacity'),
+        item: (
+            default: (
+                background: map-get($tokens, 'navbar-item-#{$scheme}-default-content-background'),
+                text: map-get($tokens, 'navbar-item-#{$scheme}-default-content-text'),
+                icon-left: map-get($tokens, 'navbar-item-#{$scheme}-default-content-icon-left'),
+                icon-right: map-get($tokens, 'navbar-item-#{$scheme}-default-content-icon-right')
+            ),
+            hover: (
+                background: map-get($tokens, 'navbar-item-#{$scheme}-states-hover-content-background'),
+                text: map-get($tokens, 'navbar-item-#{$scheme}-states-hover-content-text'),
+                icon-left: map-get($tokens, 'navbar-item-#{$scheme}-states-hover-content-icon-left'),
+                icon-right: map-get($tokens, 'navbar-item-#{$scheme}-states-hover-content-icon-right')
+            ),
+            selected: (
+                background: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-content-background'),
+                text: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-content-text'),
+                icon-left: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-content-icon-left'),
+                icon-right: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-content-icon-right')
+            ),
+            selected-hover: (
+                background: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-background'),
+                text: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-text'),
+                icon-left: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-icon-left'),
+                icon-right: map-get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-icon-right')
+            ),
+            disabled: (
+                background: map-get($tokens, 'navbar-item-#{$scheme}-states-disabled-content-background'),
+                text: map-get($tokens, 'navbar-item-#{$scheme}-states-disabled-content-text'),
+                icon-left: map-get($tokens, 'navbar-item-#{$scheme}-states-disabled-content-icon-left'),
+                icon-right: map-get($tokens, 'navbar-item-#{$scheme}-states-disabled-content-icon-right')
+            )
+        )
     );
 
     $popover: (
@@ -1697,7 +1730,8 @@
 
     $timezone: (
         text: map-get($tokens, 'timezone-option-#{$scheme}-text'),
-        caption: map-get($tokens, 'timezone-option-#{$scheme}-caption')
+        caption: map-get($tokens, 'timezone-option-#{$scheme}-caption'),
+        optgroup-label: map-get($tokens, 'timezone-option-#{$scheme}-optgroup-label')
     );
 
     $toast: (
@@ -1783,7 +1817,12 @@
         default: map-get($tokens, 'scrollbar-#{$scheme}-thumb-default-background'),
         hover: map-get($tokens, 'scrollbar-#{$scheme}-thumb-hover-background'),
         active: map-get($tokens, 'scrollbar-#{$scheme}-thumb-active-background'),
-        disabled: map-get($tokens, 'scrollbar-#{$scheme}-thumb-disabled-background')
+        disabled: map-get($tokens, 'scrollbar-#{$scheme}-thumb-disabled-background'),
+        track: (
+            default: map-get($tokens, 'scrollbar-#{$scheme}-track-default-background'),
+            hover: map-get($tokens, 'scrollbar-#{$scheme}-track-hover-background'),
+            active: map-get($tokens, 'scrollbar-#{$scheme}-track-active-background'),
+        )
     );
 
     @return (
@@ -1813,7 +1852,6 @@
         modal: $modal,
         markdown: $markdown,
         navbar: $navbar,
-        navbar-item: $navbar-item,
         popover: $popover,
         progress-bar: $progress-bar,
         progress-spinner: $progress-spinner,