@koobiq/components 16.0.0-beta.1

package/checkbox/checkbox.scss

@@ -0,0 +1,177 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/visually-hidden';
+@use '../core/styles/common/layout';
+@use '../core/styles/variables';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.kbq-checkbox-checkmark,
+.kbq-checkbox-mixedmark {
+    display: none;
+
+    position: absolute;
+
+    top: -1px;
+    left: -1px;
+    right: 0;
+    bottom: 0;
+}
+
+.kbq-checkbox__frame {
+    @include layout.kbq-fill;
+
+    box-sizing: border-box;
+    pointer-events: none;
+    background-color: transparent;
+
+    border-radius: var(--kbq-checkbox-size-normal-border-radius, map.get($tokens, checkbox-size-normal-border-radius));
+
+    border: {
+        width: var(--kbq-checkbox-size-normal-border-width, map.get($tokens, checkbox-size-normal-border-width));
+        style: solid;
+    }
+}
+
+.kbq-checkbox__layout {
+    position: relative;
+
+    display: inline-flex;
+
+    // `cursor: inherit` ensures that the wrapper element gets the same cursor as the kbq-checkbox
+    // (e.g. pointer by default, regular when disabled), instead of the browser default.
+    cursor: inherit;
+
+    padding-left: calc(
+        var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
+        var(
+            --kbq-checkbox-size-normal-horizontal-content-padding,
+            map.get($tokens, checkbox-size-normal-horizontal-content-padding)
+        )
+    );
+
+    vertical-align: top;
+}
+
+.kbq-checkbox__inner-container {
+    display: inline-block;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    height: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
+    width: var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width));
+}
+
+.kbq-checkbox {
+    display: inline-block;
+
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+
+    &.kbq-checked {
+        .kbq-checkbox-checkmark {
+            display: block;
+        }
+
+        .kbq-checkbox-mixedmark {
+            display: none;
+        }
+    }
+
+    &.kbq-indeterminate {
+        .kbq-checkbox-checkmark {
+            display: none;
+        }
+
+        .kbq-checkbox-mixedmark {
+            display: block;
+        }
+    }
+
+    &.kbq-disabled {
+        cursor: default;
+
+        .kbq-checkbox__frame {
+            box-shadow: none;
+        }
+    }
+
+    & .kbq-hint {
+        margin-top: var(
+            --kbq-checkbox-size-normal-vertical-content-padding,
+            map.get($tokens, checkbox-size-normal-vertical-content-padding)
+        );
+    }
+}
+
+.kbq-checkbox.kbq-checkbox_big {
+    & .kbq-checkbox__layout {
+        padding-left: calc(
+            var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
+            var(
+                --kbq-checkbox-size-normal-horizontal-content-padding,
+                map.get($tokens, checkbox-size-normal-horizontal-content-padding)
+            )
+        );
+    }
+
+    & .kbq-checkbox__inner-container {
+        top: 2px;
+        height: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
+        width: var(--kbq-checkbox-size-big-width, map.get($tokens, checkbox-size-big-width));
+    }
+
+    & .kbq-checkbox__frame {
+        border-radius: var(--kbq-checkbox-size-big-border-radius, map.get($tokens, checkbox-size-big-border-radius));
+
+        border: {
+            width: var(--kbq-checkbox-size-big-border-width, map.get($tokens, checkbox-size-big-border-width));
+            style: solid;
+        }
+    }
+
+    & .kbq-hint {
+        margin-top: var(
+            --kbq-checkbox-size-big-vertical-content-padding,
+            map.get($tokens, checkbox-size-big-vertical-content-padding)
+        );
+    }
+}
+
+.kbq-checkbox__text-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.kbq-checkbox__inner-container_no-side-margin {
+    margin: {
+        left: 0;
+        right: 0;
+    }
+}
+
+/* stylelint-disable no-descending-specificity */
+.kbq-checkbox_label-before {
+    .kbq-checkbox__layout {
+        padding-left: 0;
+        padding-right: calc(
+            var(--kbq-checkbox-size-normal-width, map.get($tokens, checkbox-size-normal-width)) +
+            var(
+                --kbq-checkbox-size-normal-horizontal-content-padding,
+                map.get($tokens, checkbox-size-normal-horizontal-content-padding)
+            )
+        );
+    }
+
+    .kbq-checkbox__inner-container {
+        right: 0;
+        left: unset;
+    }
+}

package/checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/checkbox/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from './checkbox';
+export * from './checkbox-config';
+export * from './checkbox-module';
+export * from './checkbox-required-validator';

package/code-block/README.md

@@ -0,0 +1,32 @@
+# Popover component
+
+## API
+
+| Property               | Description                                                                                                                                                                              | Type                  | Default |
+|------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------|---------|
+| mcPlacement            | Место для показа относительно элемента, к которому он привязан. Возможные значения: top, bottom, left, right                                                                             | string                | bottom  |
+| mcTrigger              | Триггер для показа Возможные значения: hover, manual, click, focus                                                                                                                       | string                | hover   |
+| mcVisible              | Ручное управление показом, используется только при mcTrigger="manual"                                                                                                             | boolean               | false   |
+| mcPopoverHeader        | Содержимое шапки Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.      | string | ng-template  | –       |
+| mcPopoverContent       | Содержимое компонента Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости. | string | ng-template  | –       |
+| mcPopoverFooter        | Содержимое подвала Обрати  внимание: если используешь строку, то используй аккуратно, желательно  предварительно сделать escape строки, чтобы избежать потенциальной XSS  уязвимости.    | string | ng-template  | –       |
+| mcPopoverDisabled      | Флаг для запрета показа                                                                                                                                                                  | boolean               | false   |
+| mcPopoverClass         | Добавление своих классов                                                                                                                                                                 | string | string[]     | –       |
+| mcVisibleChange        | Callback на изменение видимости компонента                                                                                                                                               | EventEmitter<boolean> | –       |
+
+## Example
+
+```html
+<ng-template #customContent>
+    Э́йяфьядлайё̀кюдль — шестой по величине ледник Исландии. Расположен на юге Исландии в 125 км к востоку от Рейкьявика. Под этим ледником находится одноимённый вулкан конической формы.
+</ng-template>
+ 
+<button
+    mcPopover
+    [mcTrigger]="'hover'"
+    [mcPlacement]="'top'"
+    [mcPopoverHeader]="'Это header'"
+    [mcPopoverContent]="customContent">
+    Найти Эйяфьядлайёкюдль
+</button>
+```

package/code-block/_code-block-theme.scss

@@ -0,0 +1,326 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:list';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin kbq-code-block-theme($theme) {
+    $code-block: map.get(map.get($theme, components), code-block);
+
+    .kbq-code-block {
+        background-color: map.get($code-block, main-background);
+        border-color: map.get($code-block, border);
+
+        .hljs {
+            $hljs: map.get($code-block, hljs);
+
+            display: block;
+            overflow-x: auto;
+
+            &-addition {
+                background-color: map.get($hljs, addition-background);
+                color: map.get($hljs, addition-color);
+            }
+
+            &-attr {
+                background-color: map.get($hljs, attr-background);
+                color: map.get($hljs, attr-color);
+            }
+
+            &-attribute {
+                background-color: map.get($hljs, attribute-background);
+                color: map.get($hljs, attribute-color);
+            }
+
+            &-built_in {
+                background-color: map.get($hljs, built_in-background);
+                color: map.get($hljs, built_in-color);
+            }
+
+            &-bullet {
+                background-color: map.get($hljs, bullet-background);
+                color: map.get($hljs, bullet-color);
+            }
+
+            &-char-escape {
+                background-color: map.get($hljs, char-escape-background);
+                color: map.get($hljs, char-escape-color);
+            }
+
+            &-class {
+                background-color: map.get($hljs, class-background);
+                color: map.get($hljs, class-color);
+            }
+
+            &-code {
+                background-color: map.get($hljs, code-background);
+                color: map.get($hljs, code-color);
+            }
+
+            &-comment {
+                background-color: map.get($hljs, comment-background);
+                color: map.get($hljs, comment-color);
+            }
+
+            &-deletion {
+                background-color: map.get($hljs, deletion-background);
+                color: map.get($hljs, deletion-color);
+            }
+
+            &-doctag {
+                background-color: map.get($hljs, doctag-background);
+                color: map.get($hljs, doctag-color);
+            }
+
+            &-emphasis {
+                background-color: map.get($hljs, emphasis-background);
+                color: map.get($hljs, emphasis-color);
+            }
+
+            &-formula {
+                background-color: map.get($hljs, formula-background);
+                color: map.get($hljs, formula-color);
+            }
+
+            &-function {
+                background-color: map.get($hljs, function-background);
+                color: map.get($hljs, function-color);
+            }
+
+            &-keyword {
+                background-color: map.get($hljs, keyword-background);
+                color: map.get($hljs, keyword-color);
+            }
+
+            &-link {
+                background-color: map.get($hljs, link-background);
+                color: map.get($hljs, link-color);
+            }
+
+            &-literal {
+                background-color: map.get($hljs, literal-background);
+                color: map.get($hljs, literal-color);
+            }
+
+            &-meta {
+                background-color: map.get($hljs, meta-background);
+                color: map.get($hljs, meta-color);
+            }
+
+            &-meta-keyword {
+                background-color: map.get($hljs, meta-keyword-background);
+                color: map.get($hljs, meta-keyword-color);
+            }
+
+            &-meta-string {
+                background-color: map.get($hljs, meta-string-background);
+                color: map.get($hljs, meta-string-color);
+            }
+
+            &-meta-prompt {
+                background-color: map.get($hljs, meta-prompt-background);
+                color: map.get($hljs, meta-prompt-color);
+            }
+
+            &-name {
+                background-color: map.get($hljs, name-background);
+                color: map.get($hljs, name-color);
+            }
+
+            &-number {
+                background-color: map.get($hljs, number-background);
+                color: map.get($hljs, number-color);
+            }
+
+            &-operator {
+                background-color: map.get($hljs, operator-background);
+                color: map.get($hljs, operator-color);
+            }
+
+            &-params {
+                background-color: map.get($hljs, params-background);
+                color: map.get($hljs, params-color);
+            }
+
+            &-property {
+                background-color: map.get($hljs, property-background);
+                color: map.get($hljs, property-color);
+            }
+
+            &-punctuation {
+                background-color: map.get($hljs, punctuation-background);
+                color: map.get($hljs, punctuation-color);
+            }
+
+            &-quote {
+                background-color: map.get($hljs, quote-background);
+                color: map.get($hljs, quote-color);
+            }
+
+            &-regexp {
+                background-color: map.get($hljs, regexp-background);
+                color: map.get($hljs, regexp-color);
+            }
+
+            &-section {
+                background-color: map.get($hljs, section-background);
+                color: map.get($hljs, section-color);
+            }
+
+            &-selector-attr {
+                background-color: map.get($hljs, selector-attr-background);
+                color: map.get($hljs, selector-attr-color);
+            }
+
+            &-selector-class {
+                background-color: map.get($hljs, selector-class-background);
+                color: map.get($hljs, selector-class-color);
+            }
+
+            &-selector-id {
+                background-color: map.get($hljs, selector-id-background);
+                color: map.get($hljs, selector-id-color);
+            }
+
+            &-selector-pseudo {
+                background-color: map.get($hljs, selector-pseudo-background);
+                color: map.get($hljs, selector-pseudo-color);
+            }
+
+            &-selector-tag {
+                background-color: map.get($hljs, selector-tag-background);
+                color: map.get($hljs, selector-tag-color);
+            }
+
+            &-string {
+                background-color: map.get($hljs, string-background);
+                color: map.get($hljs, string-color);
+            }
+
+            &-strong {
+                background-color: map.get($hljs, strong-background);
+                color: map.get($hljs, strong-color);
+            }
+
+            &-subst {
+                background-color: map.get($hljs, subst-background);
+                color: map.get($hljs, subst-color);
+            }
+
+            &-symbol {
+                background-color: map.get($hljs, symbol-background);
+                color: map.get($hljs, symbol-color);
+            }
+
+            &-tag {
+                background-color: map.get($hljs, tag-background);
+                color: map.get($hljs, tag-color);
+            }
+
+            &-template-tag {
+                background-color: map.get($hljs, template-tag-background);
+                color: map.get($hljs, template-tag-color);
+            }
+
+            &-template-variable {
+                background-color: map.get($hljs, template-variable-background);
+                color: map.get($hljs, template-variable-color);
+            }
+
+            &-title {
+                background-color: map.get($hljs, title-background);
+                color: map.get($hljs, title-color);
+            }
+
+            &-title-class {
+                background-color: map.get($hljs, title-class-background);
+                color: map.get($hljs, title-class-color);
+            }
+
+            &-title-class-inherited {
+                background-color: map.get($hljs, title-class-inherited-background);
+                color: map.get($hljs, title-class-inherited-color);
+            }
+
+            &-title-function {
+                background-color: map.get($hljs, title-function-background);
+                color: map.get($hljs, title-function-color);
+            }
+
+            &-title-function-invoke {
+                background-color: map.get($hljs, title-function-invoke-background);
+                color: map.get($hljs, title-function-invoke-color);
+            }
+
+            &-type {
+                background-color: map.get($hljs, type-background);
+                color: map.get($hljs, type-color);
+            }
+
+            &-variable {
+                background-color: map.get($hljs, variable-background);
+                color: map.get($hljs, variable-color);
+            }
+
+            &-variable-constant {
+                background-color: map.get($hljs, variable-constant-background);
+                color: map.get($hljs, variable-constant-color);
+            }
+
+            &-variable-language {
+                background-color: map.get($hljs, variable-language-background);
+                color: map.get($hljs, variable-language-color);
+            }
+
+            &-ln-n {
+                color: map.get($code-block, line-numbers-color);
+            }
+
+            &-line-numbers {
+                color: map.get($code-block, main-code-color);
+            }
+        }
+
+        &.kbq-code-block_less-contrast {
+            background-color: map.get($code-block, main-background-less-contrast);
+        }
+
+        .kbq-tab-group:after {
+            background: map.get($code-block, border);
+        }
+
+        .kbq-tab-header {
+            & .kbq-tab-label.kbq-tab-label_horizontal,
+            & .kbq-tab-header__pagination {
+                border-bottom-color: transparent;
+            }
+        }
+
+        .kbq-code-block__show-more {
+            border-top-color: map.get($code-block, border) !important;
+        }
+    }
+
+    .kbq-code-block-actionbar {
+        .kbq-code-block-actionbar_less-contrast {
+            background-color: map-get($code-block, actionbar, bg-less-contrast);
+        }
+
+        &.kbq-actionbar-block_floating {
+            background-color: map-get($code-block, actionbar, bg);
+        }
+    }
+}
+
+@mixin kbq-code-block-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-code-block {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, code-block-font-default));
+
+        .hljs-ln-numbers {
+            @include kbq-typography-level-to-styles($config, caption-mono);
+        }
+    }
+}

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

@@ -0,0 +1,22 @@
+import { AfterViewInit, EventEmitter } from '@angular/core';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import { KbqCodeBlockConfiguration, KbqCodeFile } from './code-block.types';
+import * as i0 from "@angular/core";
+export declare class KbqActionBarComponent implements AfterViewInit {
+    copyTooltip: KbqTooltipTrigger;
+    config: KbqCodeBlockConfiguration;
+    codeFiles: KbqCodeFile[];
+    lessContrast: boolean;
+    selectedTabIndex: number;
+    multiLine: boolean;
+    softWrap: boolean;
+    toggleSoftWrap: EventEmitter<void>;
+    downloadCode: EventEmitter<void>;
+    copyCode: EventEmitter<void>;
+    openExternalSystem: EventEmitter<void>;
+    copyTooltipText: string;
+    ngAfterViewInit(): void;
+    onCopy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqActionBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqActionBarComponent, "kbq-actionbar-block", never, { "config": { "alias": "config"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "lessContrast": { "alias": "lessContrast"; "required": false; }; "selectedTabIndex": { "alias": "selectedTabIndex"; "required": false; }; "multiLine": { "alias": "multiLine"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; }, { "toggleSoftWrap": "toggleSoftWrap"; "downloadCode": "downloadCode"; "copyCode": "copyCode"; "openExternalSystem": "openExternalSystem"; }, never, never, false, never>;
+}

package/code-block/actionbar.component.scss

@@ -0,0 +1,27 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.kbq-code-block-actionbar {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+
+    position: absolute;
+
+    top: 4px;
+    right: 8px;
+
+    gap: map.get($tokens, code-block-size-actionbar-gap);
+
+    border-radius: map.get($tokens, code-block-size-actionbar-border-radius);
+
+    &.kbq-actionbar-block_floating {
+        top: map.get($tokens, code-block-size-actionbar-margin-top);
+        right: map.get($tokens, code-block-size-actionbar-margin-right);
+    }
+}

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

@@ -0,0 +1,74 @@
+import { Clipboard } from '@angular/cdk/clipboard';
+import { InjectionToken, ElementRef, ChangeDetectorRef, OnDestroy, Renderer2 } from '@angular/core';
+import { KbqTabChangeEvent, KbqTabGroup } from '@koobiq/components/tabs';
+import { Subject } from 'rxjs';
+import { KbqCodeBlockConfiguration, KbqCodeFile } from './code-block.types';
+import * as i0 from "@angular/core";
+export declare const COPIED_MESSAGE_TOOLTIP_TIMEOUT = 100;
+export declare const DEFAULT_EXTENSION = "txt";
+export declare const LANGUAGES_EXTENSIONS: {
+    html: string;
+    css: string;
+    php: string;
+    java: string;
+    bash: string;
+    javascript: string;
+    typescript: string;
+    python: string;
+    ruby: string;
+    c: string;
+    'c++': string;
+    'c#': string;
+    csharp: string;
+    lua: string;
+    xml: string;
+    json: string;
+};
+export declare const KBQ_CODE_BLOCK_CONFIGURATION: InjectionToken<any>;
+export declare const KBQ_CODE_BLOCK_DEFAULT_CONFIGURATION: {
+    softWrapOnTooltip: string;
+    softWrapOffTooltip: string;
+    downloadTooltip: string;
+    copiedTooltip: string;
+    copyTooltip: string;
+    viewAllText: string;
+    viewLessText: string;
+    openExternalSystemTooltip: string;
+};
+export declare class KbqCodeBlockComponent implements OnDestroy {
+    private elementRef;
+    private changeDetectorRef;
+    private clipboard;
+    private renderer;
+    config: KbqCodeBlockConfiguration;
+    tabGroup: KbqTabGroup;
+    lineNumbers: boolean;
+    codeFiles: KbqCodeFile[];
+    lessContrast: boolean;
+    maxHeight: number;
+    softWrap: boolean;
+    get noHeader(): any;
+    get singleFile(): boolean;
+    selectedTabIndex: number;
+    copied: boolean;
+    viewAll: boolean;
+    multiLine: boolean;
+    readonly resizeStream: Subject<Event>;
+    private readonly resizeDebounceInterval;
+    private resizeSubscription;
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, clipboard: Clipboard, renderer: Renderer2, config: KbqCodeBlockConfiguration);
+    ngOnDestroy(): void;
+    updateHeader: () => void;
+    toggleSoftWrap(): void;
+    toggleViewAll(): void;
+    downloadCode(): void;
+    copyCode(): void;
+    openExternalSystem(): void;
+    onHighlighted(): void;
+    getMaxHeight(): string;
+    onSelectTab($event: KbqTabChangeEvent): void;
+    private updateMultiline;
+    private getFullFileName;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockComponent, [null, null, null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["mcCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "lessContrast": { "alias": "lessContrast"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; }, {}, never, never, false, never>;
+}

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

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