@koobiq/components 18.10.0 → 18.12.0

package/autocomplete/autocomplete-trigger.directive.d.ts

@@ -16,7 +16,6 @@ import * as i0 from "@angular/core";
  */
 /** The total height of the autocomplete panel. */
 export declare const AUTOCOMPLETE_PANEL_HEIGHT = 256;
-export declare const AUTOCOMPLETE_BORDER_WIDTH: number;
 /** Injection token that determines the scroll handling while the autocomplete panel is open. */
 export declare const KBQ_AUTOCOMPLETE_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 export declare function KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;

package/autocomplete/autocomplete.scss

@@ -10,17 +10,14 @@
     overflow: hidden auto;
     -webkit-overflow-scrolling: touch; // for momentum scroll on mobile
 
-    margin-top: -1px;
-
+    box-sizing: border-box;
     min-width: 100%;
     width: 100%;
     max-width: none;
 
+    border-radius: var(--kbq-autocomplete-size-panel-border-radius, var(--kbq-size-border-radius));
     max-height: var(--kbq-autocomplete-size-panel-max-height);
 
-    border-bottom-left-radius: var(--kbq-autocomplete-size-panel-border-radius);
-    border-bottom-right-radius: var(--kbq-autocomplete-size-panel-border-radius);
-
     padding: var(--kbq-size-xxs);
 
     &.kbq-autocomplete_visible {
@@ -51,11 +48,6 @@
         }
     }
 
-    .kbq-autocomplete-panel-above & {
-        border-radius: var(--kbq-autocomplete-size-panel-border-radius) var(--kbq-autocomplete-size-panel-border-radius)
-            0 0;
-    }
-
     // We need to offset horizontal dividers by their height, because
     // they throw off the keyboard navigation inside the panel.
     .kbq-divider-horizontal {

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-xs);
+    --kbq-button-size-content-padding: var(--kbq-size-s);
     --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/code-block/_code-block-theme.scss

@@ -8,65 +8,56 @@
     $base: code-block-#{$style-name};
 
     background: var(--kbq-#{$base}-container-background);
+    border-color: var(--kbq-#{$base}-container-border-color);
 
-    & .kbq-tab-header {
-        background: var(--kbq-#{$base}-header-background) !important;
-        border-color: var(--kbq-#{$base}-container-border-color);
+    & .kbq-code-block__header {
+        background: var(--kbq-#{$base}-header-background);
     }
 
-    .kbq-tab-body__wrapper {
-        border-color: var(--kbq-#{$base}-container-border-color);
-    }
-
-    &:not(.kbq-code-block_no-header) {
-        .kbq-tab-body__wrapper {
-            border-top-color: transparent;
-        }
-    }
-
-    & .kbq-code-block-actionbar {
+    & .kbq-code-block__actionbar {
         background: var(--kbq-#{$base}-actionbar-background);
-
-        &.kbq-actionbar-block_floating {
-            .kbq-actionbar-block__button-stack {
-                background: var(--kbq-#{$base}-actionbar-background);
-            }
-        }
     }
 
     &.kbq-code-block_header-with-shadow {
-        & .kbq-tab-header {
+        & .kbq-code-block__header {
             box-shadow: var(--kbq-#{$base}-header-scroll-shadow);
         }
     }
 
-    &.kbq-code-block_no-header {
-        & .kbq-code-block__fade-gradient {
-            background: var(--kbq-#{$base}-actionbar-fade-gradient);
+    &.kbq-code-block_hide-tabs {
+        .kbq-code-block__actionbar {
+            background: transparent;
+
+            .kbq-code-block__actionbar__fade-gradient {
+                background: var(--kbq-#{$base}-actionbar-fade-gradient);
+            }
+
+            .kbq-code-block__actionbar__button-stack {
+                background: var(--kbq-#{$base}-actionbar-background);
+            }
         }
     }
 
-    .kbq-code-block__show-more {
-        .bg-wrapper {
+    .kbq-code-block__view-all {
+        .kbq-code-block__view-all__wrapper {
             background: var(--kbq-#{$base}-collapse-button-expand-background);
             opacity: 90%;
         }
-    }
 
-    & .kbq-code-block__show-more_expanded {
-        background: var(--kbq-#{$base}-collapse-expanded-background);
-    }
+        &.kbq-code-block__view-all_expanded {
+            background: var(--kbq-#{$base}-collapse-expanded-background);
+        }
 
-    & .kbq-code-block__show-more_collapsed {
-        background: var(--kbq-#{$base}-collapse-collapsed-background);
+        &.kbq-code-block__view-all_collapsed {
+            background: var(--kbq-#{$base}-collapse-collapsed-background);
+        }
     }
 }
 
 @mixin kbq-code-block-theme() {
     .kbq-code-block {
-        .hljs {
-            display: block;
-            overflow-x: auto;
+        &.kbq-code-block_no-border {
+            border-color: transparent !important;
         }
 
         .hljs-addition {
@@ -85,8 +76,8 @@
         }
 
         .hljs-built_in {
-            background-color: kbq-code-block-hljs-attr(built_in-background);
-            color: kbq-code-block-hljs-attr(built_in-color);
+            background-color: kbq-code-block-hljs-attr(built-in-background);
+            color: kbq-code-block-hljs-attr(built-in-color);
         }
 
         .hljs-bullet {
@@ -336,23 +327,13 @@
             @include kbq-code-block-style(filled);
         }
 
-        .kbq-tab-header {
-            & .kbq-tab-label.kbq-tab-label_horizontal,
-            & .kbq-tab-header__pagination {
-                border-bottom-color: transparent;
-            }
+        .kbq-code-block__content {
+            border-color: transparent;
         }
 
-        .kbq-tab-group.kbq-focused {
-            // paint focus border from the top since because of border constraints
-            .kbq-tab-header {
-                box-shadow: 0 2px 0 -1px var(--kbq-states-line-focus-theme);
-            }
-
-            .kbq-tab-body__wrapper {
-                border-color: var(--kbq-states-line-focus-theme);
-                box-shadow: inset 0 0 0.1 1px var(--kbq-states-line-focus-theme);
-            }
+        .kbq-code-block__content.cdk-keyboard-focused {
+            outline: none;
+            border-color: var(--kbq-states-line-focus-theme);
         }
     }
 }
@@ -361,10 +342,10 @@
     .kbq-code-block {
         @include kbq-typography-level-to-styles-css-variables(typography, mono-codeblock);
 
-        & .kbq-code-block__code {
+        .kbq-code-block__content {
             font: inherit;
 
-            > code {
+            .kbq-code-block__code {
                 font: inherit;
             }
         }

package/code-block/code-block-highlight.d.ts

@@ -0,0 +1,44 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { KbqCodeBlockFile } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Fallback language for code block if language is not supported/specified.
+ *
+ * List of supported languages:
+ * @link https://highlightjs.readthedocs.io/en/stable/supported-languages.html
+ */
+export declare const KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE: InjectionToken<string>;
+/** Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`. */
+export declare const kbqCodeBlockFallbackFileLanguageProvider: (language: string) => Provider;
+/** Directive which applies syntax highlighting to the code block content. */
+export declare class KbqCodeBlockHighlight {
+    private readonly nativeElement;
+    private readonly document;
+    private readonly renderer;
+    private readonly domSanitizer;
+    private readonly fallbackFileLanguage;
+    /** The code file. */
+    set file({ language, content }: KbqCodeBlockFile);
+    /** The starting line number. */
+    startFrom: number;
+    /** Whether to display line numbers for single line code block. */
+    singleLine: boolean;
+    constructor();
+    /** Use defaultView of injected document if available or fallback to global window reference */
+    private getWindow;
+    /**
+     * Initialize the HighlightJS line numbers plugin. This method is called once when
+     * the component is constructed.
+     */
+    private initLineNumbersPlugin;
+    /**
+     * This method is not intended for editing.
+     * Changes may lead to unpredictable behavior.
+     * Source code: https://github.com/wcoder/highlightjs-line-numbers.js/blob/v2.9.0/src/highlightjs-line-numbers.js
+     */
+    private highlightJSLineNumbersPlugin;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockHighlight, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqCodeBlockHighlight, "code[kbqCodeBlockHighlight]", never, { "file": { "alias": "file"; "required": true; }; "startFrom": { "alias": "startFrom"; "required": false; }; "singleLine": { "alias": "singleLine"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_startFrom: unknown;
+    static ngAcceptInputType_singleLine: unknown;
+}

package/code-block/code-block-tokens.scss

@@ -6,15 +6,10 @@
     --kbq-code-block-size-with-header-content-padding-horizontal: var(--kbq-size-xl);
     --kbq-code-block-size-with-header-content-content-gap-horizontal: var(--kbq-size-m);
     --kbq-code-block-size-no-header-content-padding-vertical: 14px;
-    --kbq-code-block-size-no-header-content-padding-horizontal: 20px;
+    --kbq-code-block-size-no-header-content-padding-horizontal: var(--kbq-size-xl);
     --kbq-code-block-size-no-header-content-content-gap-horizontal: var(--kbq-size-m);
-    --kbq-code-block-size-header-padding-vertical: var(--kbq-size-s);
-    --kbq-code-block-size-header-padding-left: var(--kbq-size-m);
-    --kbq-code-block-size-header-padding-right: var(--kbq-size-s);
     --kbq-code-block-size-header-content-gap-horizontal: var(--kbq-size-l);
     --kbq-code-block-size-actionbar-content-gap-horizontal: var(--kbq-size-3xs);
-    --kbq-code-block-size-actionbar-padding-vertical: var(--kbq-size-s);
-    --kbq-code-block-size-actionbar-padding-horizontal: var(--kbq-size-m);
     --kbq-code-block-size-actionbar-fade-gradient-width: var(--kbq-size-3xl);
     --kbq-code-block-size-collapse-expanded-padding-top: 0;
     --kbq-code-block-size-collapse-expanded-padding-bottom: var(--kbq-size-l);
@@ -136,8 +131,8 @@
     --kbq-code-block-filled-collapse-expanded-background: transparent;
     --kbq-code-block-filled-collapse-collapsed-background: linear-gradient(
         180deg,
-        hsla(225, 15%, 95%, 0%) 0%,
-        hsla(225, 15%, 95%, 100%) 100%
+        transparent,
+        var(--kbq-background-bg-secondary) 100%
     );
     --kbq-code-block-filled-collapse-button-expand-background: var(--kbq-background-bg-secondary);
     --kbq-code-block-outline-container-background: var(--kbq-background-card);
@@ -149,8 +144,8 @@
     --kbq-code-block-outline-collapse-expanded-background: transparent;
     --kbq-code-block-outline-collapse-collapsed-background: linear-gradient(
         180deg,
-        hsla(0, 0%, 100%, 0%) 0%,
-        hsla(0, 0%, 100%, 100%) 100%
+        transparent,
+        var(--kbq-background-bg) 100%
     );
     --kbq-code-block-outline-collapse-button-expand-background: var(--kbq-background-card);
     --kbq-code-block-hljs-addition-background: var(--kbq-palette-green-95);
@@ -160,7 +155,7 @@
     --kbq-code-block-hljs-attribute-background: null;
     --kbq-code-block-hljs-attribute-color: null;
     --kbq-code-block-hljs-built-in-background: null;
-    --kbq-code-block-hljs-built-in-color: null;
+    --kbq-code-block-hljs-built-in-color: var(--kbq-palette-blue-35);
     --kbq-code-block-hljs-bullet-background: null;
     --kbq-code-block-hljs-bullet-color: null;
     --kbq-code-block-hljs-char-escape-background: null;
@@ -256,4 +251,5 @@
     --kbq-code-block-hljs-variable-constant-color: null;
     --kbq-code-block-hljs-variable-language-background: null;
     --kbq-code-block-hljs-variable-language-color: null;
+    --kbq-code-block-tab-size: 4;
 }

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

@@ -0,0 +1,187 @@
+import { CdkScrollable } from '@angular/cdk/scrolling';
+import { AfterViewInit, EventEmitter, InjectionToken, Provider } from '@angular/core';
+import { KbqButtonStyles } from '@koobiq/components/button';
+import { KbqCodeBlockLocaleConfiguration, KbqComponentColors } from '@koobiq/components/core';
+import { KbqCodeBlockFile } from './types';
+import * as i0 from "@angular/core";
+/** Localization configuration provider. */
+export declare const KBQ_CODE_BLOCK_LOCALE_CONFIGURATION: InjectionToken<KbqCodeBlockLocaleConfiguration>;
+/** Utility provider for `KBQ_CODE_BLOCK_LOCALE_CONFIGURATION`. */
+export declare const kbqCodeBlockLocaleConfigurationProvider: (configuration: KbqCodeBlockLocaleConfiguration) => Provider;
+/** Fallback file name for code block if file name is not specified. */
+export declare const KBQ_CODE_BLOCK_FALLBACK_FILE_NAME: InjectionToken<string>;
+/** Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_NAME`. */
+export declare const kbqCodeBlockFallbackFileNameProvider: (fileName: string) => Provider;
+/**
+ * Component which highlights blocks of code.
+ */
+export declare class KbqCodeBlock implements AfterViewInit {
+    private readonly copyButtonTooltip?;
+    readonly scrollableCodeContent: CdkScrollable;
+    /** Whether to display line numbers. */
+    lineNumbers: boolean;
+    /** Whether the code block should be filled. */
+    filled: boolean;
+    /** Added soft wrap toggle button.  */
+    canToggleSoftWrap: boolean;
+    /** Whether sequences of whitespace should be preserved. */
+    softWrap: boolean;
+    /** Event emitted when `softWrap` is changed. */
+    readonly softWrapChange: EventEmitter<boolean>;
+    /**
+     * Allows to view all the code, otherwise it will be hidden.
+     * Works only with `maxHeight` property.
+     */
+    viewAll: boolean;
+    /** Event emitted when `viewAll` is changed. */
+    readonly viewAllChange: EventEmitter<boolean>;
+    /**
+     * Maximum height of the code block content, other parts will be hidden.
+     * Can be toggled by `viewAll` property.
+     */
+    maxHeight: number;
+    protected get calculatedMaxHeight(): number | null;
+    /** @deprecated Will be removed in next major release, use `canDownload` instead. */
+    set canLoad(value: boolean);
+    /** Added download code button. */
+    canDownload: boolean;
+    /** Added copy code button. */
+    canCopy: boolean;
+    /** @deprecated Will be removed in next major release, use `files` instead. */
+    set codeFiles(files: KbqCodeBlockFile[]);
+    /**
+     * @TODO Mark as `required`, after removing `codeFiles`
+     *
+     * Files to display.
+     */
+    set files(files: KbqCodeBlockFile[]);
+    get files(): KbqCodeBlockFile[];
+    private _files;
+    /** Defines which file (index) is active. */
+    activeFileIndex: number;
+    readonly activeFileIndexChange: EventEmitter<number>;
+    /** Whether to hide border. */
+    noBorder: boolean;
+    /**
+     * Whether to hide header tabs.
+     * Always `true` if there is only one file without filename.
+     * Makes actionbar floating if tabs are hidden.
+     */
+    set hideTabs(value: boolean);
+    get hideTabs(): boolean;
+    private _hideTabs;
+    /** Component locale configuration. */
+    protected get localeConfiguration(): KbqCodeBlockLocaleConfiguration;
+    private _localeConfiguration;
+    /** Code content tab index. */
+    protected get codeContentTabIndex(): number;
+    /**
+     * Determines whether the code content can be focused.
+     *
+     * This checks if the scrollable code content element is present,
+     * has a scroll, and the calculated maximum height is not set.
+     */
+    private get canCodeContentBeFocused();
+    protected readonly componentColor: typeof KbqComponentColors;
+    protected readonly buttonStyle: typeof KbqButtonStyles;
+    private readonly elementRef;
+    private readonly changeDetectorRef;
+    private readonly localeService;
+    private readonly destroyRef;
+    private readonly renderer;
+    private readonly platform;
+    private readonly focusMonitor;
+    private readonly clipboard;
+    private readonly domSanitizer;
+    private readonly document;
+    protected readonly fallbackFileName: string;
+    constructor();
+    ngAfterViewInit(): void;
+    /**
+     * Toggles the `viewAll` property.
+     *
+     * When `viewAll` is set to `true`, the content of the code block will be
+     * displayed in its entirety. When set to `false`, the content will be
+     * limited to the `maxHeight` property. If the content exceeds the
+     * `maxHeight`, it will be scrolled to the top and the `viewAll` button
+     * will be displayed.
+     */
+    toggleViewAll(): void;
+    /**
+     * Toggles `softWrap` property.
+     *
+     * When `softWrap` is set to `true`, the content of the code block will be
+     * wrapped if it exceeds the height of the component. When set to `false`
+     * the content will not be wrapped.
+     */
+    toggleSoftWrap(): void;
+    /**
+     * Handles the change of the selected tab by updating the active file index
+     * and scrolling to the top of the scrollable content.
+     *
+     * @param index - The index of the newly selected tab.
+     */
+    protected onSelectedTabChange(index: number): void;
+    /**
+     * Handles the hover event on the code block element and updates the actionbar display accordingly.
+     */
+    private handleHover;
+    /**
+     * Handles the scroll event on the scrollable code content element and updates the header shadow accordingly.
+     */
+    private handleScroll;
+    /**
+     * Adds or removes the shadow class from the code block based on the specified condition.
+     *
+     * @param shouldShowShadow - A boolean indicating whether to add or remove the shadow class.
+     */
+    private setupHeaderShadow;
+    /**
+     * Adds or removes the actionbar display class from the code block based on the specified condition.
+     *
+     * The actionbar is always visible on mobile devices and when the tabs are visible.
+     * Otherwise, the actionbar is only visible when the mouse is hovered over the code block.
+     *
+     * @param shouldShowActionbar - A boolean indicating whether the actionbar should be visible.
+     */
+    private setupActionbarDisplay;
+    /** Whether the element has scroll. */
+    private hasScroll;
+    /** Handles the enter keydown event on `viewAll` button. */
+    protected onViewAllEnterKeydown(): void;
+    private updateLocaleParams;
+    /**
+     * Copies the file code to the clipboard.
+     *
+     * If the copy was successful, the copy button tooltip content is updated
+     * to show the "copied" message.
+     */
+    protected copyCode(): void;
+    /**
+     * Opens the file link in a new window.
+     */
+    protected openLink(): void;
+    /**
+     * Downloads the file as a blob.
+     *
+     * Creates a link with a blob as href and the file name as download attribute.
+     * Then simulates a click event on the link to initiate the download.
+     */
+    protected downloadCode(): void;
+    /** Use defaultView of injected document if available or fallback to global window reference */
+    private getWindow;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlock, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlock, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "filled": { "alias": "filled"; "required": false; }; "canToggleSoftWrap": { "alias": "canToggleSoftWrap"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; "viewAll": { "alias": "viewAll"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "canLoad": { "alias": "canLoad"; "required": false; }; "canDownload": { "alias": "canDownload"; "required": false; }; "canCopy": { "alias": "canCopy"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "files": { "alias": "files"; "required": false; }; "activeFileIndex": { "alias": "activeFileIndex"; "required": false; }; "noBorder": { "alias": "noBorder"; "required": false; }; "hideTabs": { "alias": "hideTabs"; "required": false; }; }, { "softWrapChange": "softWrapChange"; "viewAllChange": "viewAllChange"; "activeFileIndexChange": "activeFileIndexChange"; }, never, never, true, never>;
+    static ngAcceptInputType_lineNumbers: unknown;
+    static ngAcceptInputType_filled: unknown;
+    static ngAcceptInputType_canToggleSoftWrap: unknown;
+    static ngAcceptInputType_softWrap: unknown;
+    static ngAcceptInputType_viewAll: unknown;
+    static ngAcceptInputType_maxHeight: unknown;
+    static ngAcceptInputType_canLoad: unknown;
+    static ngAcceptInputType_canDownload: unknown;
+    static ngAcceptInputType_canCopy: unknown;
+    static ngAcceptInputType_activeFileIndex: unknown;
+    static ngAcceptInputType_noBorder: unknown;
+    static ngAcceptInputType_hideTabs: unknown;
+}

package/code-block/code-block.module.d.ts

@@ -1,13 +1,7 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./code-block.component";
-import * as i2 from "./actionbar.component";
-import * as i3 from "@koobiq/components/button";
-import * as i4 from "@koobiq/components/tooltip";
-import * as i5 from "@koobiq/components/icon";
-import * as i6 from "@koobiq/components/tabs";
-import * as i7 from "./code-block-content";
+import * as i1 from "./code-block";
 export declare class KbqCodeBlockModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqCodeBlockModule, [typeof i1.KbqCodeBlockComponent, typeof i2.KbqActionBarComponent], [typeof i3.KbqButtonModule, typeof i4.KbqToolTipModule, typeof i5.KbqIconModule, typeof i6.KbqTabsModule, typeof i7.KbqCodeBlockContent], [typeof i1.KbqCodeBlockComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqCodeBlockModule, never, [typeof i1.KbqCodeBlock], [typeof i1.KbqCodeBlock]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqCodeBlockModule>;
 }