@koobiq/components 18.10.0 → 18.12.0

package/code-block/code-block.scss

@@ -1,71 +1,96 @@
-@use '../core/styles/common/tokens' as *;
-
-@use './code-block-theme' as *;
-
-$border-radius: var(--kbq-code-block-size-container-border-radius);
-$border-width: var(--kbq-code-block-size-container-border-width);
+@use './code-block-theme' as theme;
 
 .kbq-code-block {
-    display: block;
+    display: flex;
+    flex-direction: column;
     position: relative;
     overflow: hidden;
-
+    border-width: var(--kbq-code-block-size-container-border-width);
+    border-style: solid;
+    border-radius: var(--kbq-code-block-size-container-border-radius);
     box-sizing: border-box;
-
     hyphens: none;
     -ms-hyphens: none;
     -moz-hyphens: none;
     -webkit-hyphens: none;
 
-    border-radius: $border-radius;
-    border-width: 0;
+    .kbq-code-block__header {
+        display: flex;
+        align-items: center;
+        padding: var(--kbq-size-s) var(--kbq-size-m);
 
-    .kbq-tab-header {
-        // 4 buttons + margin
-        $buttons-margin: calc(32 * 4) + 24px;
+        .kbq-code-block__header-tabs {
+            overflow: hidden;
+            flex-grow: 1;
+        }
+    }
 
-        padding: calc(var(--kbq-code-block-size-header-padding-vertical) - $border-width)
-            kbq-sum-series-css-variables([code-block-size-header-padding-right, $buttons-margin])
-            var(--kbq-code-block-size-header-padding-vertical) var(--kbq-code-block-size-header-padding-left);
+    .kbq-code-block__actionbar {
+        display: flex;
+        justify-content: right;
+        align-items: center;
 
-        border-width: $border-width $border-width 0 $border-width;
-        border-style: solid;
-        border-radius: $border-radius $border-radius 0 0;
-    }
+        z-index: 1;
 
-    &:has(.kbq-code-block__show-more) {
-        .kbq-code-block__code {
-            & > code {
-                padding-bottom: var(--kbq-size-3xl) !important;
-                overflow-x: scroll;
-            }
+        .kbq-code-block__actionbar__button-stack {
+            display: flex;
+            gap: var(--kbq-code-block-size-actionbar-content-gap-horizontal);
         }
 
-        &:has(.kbq-code-block__show-more_collapsed) {
+        .kbq-code-block__actionbar__fade-gradient {
+            align-self: stretch;
+            width: var(--kbq-code-block-size-actionbar-fade-gradient-width);
+        }
+    }
+
+    &:has(.kbq-code-block__view-all) {
+        .kbq-code-block__content {
             .kbq-code-block__code {
-                & > code {
-                    overflow-x: hidden;
-                }
+                padding-bottom: var(--kbq-size-3xl) !important;
             }
         }
     }
 
-    .kbq-code-block__code {
-        > code {
+    .kbq-code-block__content {
+        flex-grow: 1;
+        margin: 0;
+        flex-direction: column;
+        border-width: var(--kbq-code-block-size-container-border-width);
+        border-style: solid;
+        border-radius: var(--kbq-code-block-size-container-border-radius);
+
+        .kbq-code-block__code {
+            tab-size: var(--kbq-code-block-tab-size);
             padding: var(--kbq-code-block-size-with-header-content-padding-top)
                 var(--kbq-code-block-size-with-header-content-padding-horizontal)
                 var(--kbq-code-block-size-with-header-content-padding-bottom)
                 var(--kbq-code-block-size-with-header-content-padding-horizontal);
 
-            border-radius: $border-radius;
-
             &:focus-visible {
                 outline: none;
             }
         }
 
+        .hljs {
+            display: block;
+        }
+
         .hljs-ln-numbers {
             padding-right: var(--kbq-code-block-size-with-header-content-content-gap-horizontal);
+            vertical-align: baseline;
+            text-align: right;
+        }
+
+        .hljs-ln {
+            border-collapse: unset;
+
+            .hljs {
+                padding: 0;
+            }
+        }
+
+        .hljs-ln-n:before {
+            white-space: nowrap;
         }
     }
 
@@ -73,40 +98,36 @@ $border-width: var(--kbq-code-block-size-container-border-width);
         display: none;
     }
 
-    &.kbq-code-block_single-file {
-        .kbq-tab-label {
-            &:before {
-                content: none;
-            }
-
-            &:hover {
-                background: transparent !important;
-            }
+    &.kbq-code-block_soft-wrap {
+        .kbq-code-block__code {
+            white-space: pre-wrap;
         }
     }
 
-    &:not(.kbq-code-block_no-header) {
-        .kbq-tab-body__wrapper {
-            border-top-width: 0;
-            // actionbar can be visible when positioned in the header
-            overflow: visible;
+    &.kbq-code-block_view-all {
+        .kbq-code-block__content {
+            max-height: unset;
+            overflow: auto;
         }
     }
 
-    &.kbq-code-block_no-header {
-        .kbq-tab-header {
-            display: none;
+    &.kbq-code-block_hide-tabs {
+        .kbq-code-block__header {
+            padding: 0;
         }
 
-        .kbq-tab-body__wrapper {
-            border-width: $border-width;
-            border-radius: $border-radius;
+        .kbq-code-block__actionbar {
+            display: none;
+            position: absolute;
+            top: 0;
+            right: 0;
+            padding: var(--kbq-size-s) var(--kbq-size-m);
         }
 
-        .kbq-code-block__code {
+        .kbq-code-block__content {
             position: relative;
 
-            & > code {
+            .kbq-code-block__code {
                 padding: var(--kbq-code-block-size-no-header-content-padding-vertical)
                     var(--kbq-code-block-size-no-header-content-padding-horizontal);
             }
@@ -117,84 +138,39 @@ $border-width: var(--kbq-code-block-size-container-border-width);
         }
     }
 
-    &:not(:has(.kbq-code-block__show-more)) {
-        .kbq-code-block__code {
-            overflow-y: auto;
-        }
-    }
-
-    pre {
-        margin: 0;
-    }
-
-    .kbq-tab-body__wrapper {
-        flex-direction: column;
-        border-width: $border-width;
-        border-style: solid;
-        border-radius: 0 0 $border-radius $border-radius;
-    }
-
-    .kbq-tab-body.kbq-tab-body__active {
-        position: unset;
-    }
-}
-
-.kbq-code-block__code {
-    overflow-y: hidden;
-
-    &.kbq-code-block__code_view-all {
-        max-height: unset;
-        overflow-y: auto;
-    }
-
-    &.kbq-code-block__code_soft-wrap {
-        white-space: pre-wrap;
+    &.kbq-code-block_show-actionbar .kbq-code-block__actionbar {
+        display: flex;
     }
 
-    .hljs-ln {
-        border-collapse: unset;
-
-        .hljs {
-            padding: 0;
+    &:not(:has(.kbq-code-block__view-all)) {
+        .kbq-code-block__content {
+            overflow: auto;
         }
     }
 
-    .hljs-ln-numbers {
-        vertical-align: baseline;
-        text-align: right;
-    }
-
-    .hljs-ln-n:before {
-        white-space: nowrap;
-    }
-}
-
-.kbq-code-block__show-more {
-    display: flex;
-    justify-content: center;
-
-    width: 100%;
-
-    position: absolute;
-    bottom: 0;
-    border-radius: $border-radius;
-
-    &.kbq-code-block__show-more_collapsed {
-        padding-top: var(--kbq-code-block-size-collapse-collapsed-padding-top);
-
-        padding-bottom: var(--kbq-code-block-size-collapse-collapsed-padding-bottom);
-    }
+    .kbq-code-block__view-all {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        border-radius: var(--kbq-code-block-size-container-border-radius);
 
-    &.kbq-code-block__show-more_expanded {
-        padding-top: var(--kbq-code-block-size-collapse-expanded-padding-top);
+        .kbq-code-block__view-all__wrapper {
+            border-radius: var(--kbq-size-border-radius);
+        }
 
-        margin-bottom: var(--kbq-code-block-size-collapse-expanded-padding-bottom);
-    }
+        &.kbq-code-block__view-all_collapsed {
+            padding-top: var(--kbq-code-block-size-collapse-collapsed-padding-top);
+            padding-bottom: var(--kbq-code-block-size-collapse-collapsed-padding-bottom);
+        }
 
-    .bg-wrapper {
-        border-radius: var(--kbq-size-border-radius);
+        &.kbq-code-block__view-all_expanded {
+            padding-top: var(--kbq-code-block-size-collapse-expanded-padding-top);
+            margin-bottom: var(--kbq-code-block-size-collapse-expanded-padding-bottom);
+        }
     }
 }
 
-@include kbq-code-block-theme();
-@include kbq-code-block-typography();
+@include theme.kbq-code-block-theme();
+@include theme.kbq-code-block-typography();

package/code-block/public-api.d.ts

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

package/code-block/types.d.ts

@@ -0,0 +1,27 @@
+/** Code block file object. */
+export type KbqCodeBlockFile = {
+    /**
+     * Code content.
+     */
+    content: string;
+    /**
+     * File name, which will be displayed in UI and when downloading.
+     * If not provided, will be set to `KBQ_CODE_BLOCK_FALLBACK_FILE_NAME`.
+     */
+    filename?: string;
+    /**
+     * File language, requires for correct syntax highlighting.
+     * If not provided or invalid, will be set to `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`.
+     *
+     * List of supported languages:
+     * @link https://highlightjs.readthedocs.io/en/stable/supported-languages.html
+     */
+    language?: string;
+    /**
+     * Link to the file, which will be opened in a new window.
+     * Adds `openExternalSystem` button.
+     */
+    link?: string;
+};
+/** @deprecated Will be removed in next major release, use `KbqCodeBlockFile` instead. */
+export type KbqCodeFile = KbqCodeBlockFile;

package/core/common-behaviors/error-state.d.ts

@@ -15,10 +15,10 @@ export interface CanUpdateErrorState {
 export type CanUpdateErrorStateCtor = Constructor<CanUpdateErrorState>;
 /** @docs-private */
 export interface HasErrorState {
-    parentFormGroup: FormGroupDirective;
-    parentForm: NgForm;
+    parentFormGroup: FormGroupDirective | null;
+    parentForm: NgForm | null;
     defaultErrorStateMatcher: ErrorStateMatcher;
-    ngControl: NgControl;
+    ngControl: NgControl | null;
     stateChanges: Subject<void>;
 }
 /**

package/core/error/error-state-matcher.d.ts

@@ -1,5 +1,8 @@
+import { Provider, Type } from '@angular/core';
 import { AbstractControl, FormGroupDirective, NgForm } from '@angular/forms';
 import * as i0 from "@angular/core";
+/** Utility provider for `ErrorStateMatcher`. */
+export declare const kbqErrorStateMatcherProvider: (errorStateMatcher: Type<ErrorStateMatcher> | ErrorStateMatcher) => Provider;
 /**
  * Error state matcher that matches when a control is invalid and form is submitted.
  * Requires use FormGroupDirective or NgForm.

package/core/locales/index.d.ts

@@ -7,3 +7,4 @@ export * from './zh-CN';
 export * from './formatters';
 export * from './locale-service';
 export * from './locale-service.module';
+export * from './types';

package/core/locales/types.d.ts

@@ -0,0 +1,11 @@
+/** Locale configuration for `KbqCodeBlockModule`. */
+export type KbqCodeBlockLocaleConfiguration = {
+    softWrapOnTooltip: string;
+    softWrapOffTooltip: string;
+    downloadTooltip: string;
+    copiedTooltip: string;
+    copyTooltip: string;
+    viewAllText: string;
+    viewLessText: string;
+    openExternalSystemTooltip: string;
+};

package/core/pop-up/constants.d.ts

@@ -1,3 +1,12 @@
+import { InjectionToken } from '@angular/core';
+import { Observable } from 'rxjs';
+export interface KbqParentPopup {
+    closedStream: Observable<boolean>;
+}
+/**
+ * InjectionToken for providing component with popup. Used in select and tree-select for tooltip.
+ */
+export declare const KBQ_PARENT_POPUP: InjectionToken<KbqParentPopup>;
 export declare enum PopUpPlacements {
     Top = "top",
     TopLeft = "topLeft",

package/core/select/constants.d.ts

@@ -1,10 +1,22 @@
 import { Overlay, RepositionScrollStrategy, ScrollStrategy } from '@angular/cdk/overlay';
 import { InjectionToken } from '@angular/core';
-/** The max height of the select's overlay panel */
+/**
+ * @TODO: should be removed within refactoring (#DS-3298)
+ * The max height of the select's overlay panel
+ * @deprecated
+ */
 export declare const SELECT_PANEL_MAX_HEIGHT = 224;
-/** The panel's padding on the x-axis */
-export declare const SELECT_PANEL_PADDING_X = 1;
-/** The panel's x axis padding if it is indented (e.g. there is an option group). */
+/**
+ * @TODO: should be removed within refactoring (#DS-3298)
+ * The panel's padding on the x-axis
+ * @deprecated
+ */
+export declare const SELECT_PANEL_PADDING_X = 0;
+/**
+ * @TODO: should be removed within refactoring (#DS-3298)
+ * The panel's x-axis padding if it is indented (e.g. there is an option group).
+ * @deprecated
+ */
 export declare const SELECT_PANEL_INDENT_PADDING_X: number;
 /**
  * The select panel will only "fit" inside the viewport if it is positioned at

package/core/styles/theming/_scrollbar-theme.scss

@@ -58,7 +58,8 @@
             scrollbar-color: var(--kbq-scrollbar-thumb-default-background) transparent;
         }
 
-        // webkit
+        &::-webkit-scrollbar-track,
+        &::-webkit-scrollbar-corner,
         &::-webkit-scrollbar,
         ::-webkit-scrollbar {
             background-color: transparent;