@koobiq/components 16.0.0-beta.1

package/loader-overlay/loader-overlay.component.d.ts

@@ -0,0 +1,34 @@
+import { ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class KbqLoaderOverlayIndicator {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlayIndicator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLoaderOverlayIndicator, "[kbq-loader-overlay-indicator]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqLoaderOverlayText {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlayText, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLoaderOverlayText, "[kbq-loader-overlay-text]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqLoaderOverlayCaption {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlayCaption, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLoaderOverlayCaption, "[kbq-loader-overlay-caption]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqLoaderOverlay implements OnInit, OnDestroy {
+    private elementRef;
+    private renderer;
+    private fixedTop;
+    text: string;
+    caption: string;
+    get isExternalIndicator(): boolean;
+    get isExternalText(): boolean;
+    get isExternalCaption(): boolean;
+    get isFixedTop(): boolean;
+    get isEmpty(): boolean;
+    externalIndicator: KbqLoaderOverlayIndicator | null;
+    externalText: KbqLoaderOverlayText | null;
+    externalCaption: KbqLoaderOverlayCaption | null;
+    constructor(elementRef: ElementRef, renderer: Renderer2, fixedTop: string | null);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlay, [null, null, { attribute: "fixed-top"; optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqLoaderOverlay, "kbq-loader-overlay", never, { "text": { "alias": "text"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[kbq-loader-overlay-indicator]", "[kbq-loader-overlay-text]", "[kbq-loader-overlay-caption]"], false, never>;
+}

package/loader-overlay/loader-overlay.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./loader-overlay.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/a11y";
+import * as i4 from "@angular/cdk/platform";
+import * as i5 from "@koobiq/components/progress-spinner";
+export declare class KbqLoaderOverlayModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlayModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqLoaderOverlayModule, [typeof i1.KbqLoaderOverlay, typeof i1.KbqLoaderOverlayIndicator, typeof i1.KbqLoaderOverlayText, typeof i1.KbqLoaderOverlayCaption], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule, typeof i5.KbqProgressSpinnerModule], [typeof i1.KbqLoaderOverlay, typeof i1.KbqLoaderOverlayIndicator, typeof i1.KbqLoaderOverlayText, typeof i1.KbqLoaderOverlayCaption]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqLoaderOverlayModule>;
+}

package/loader-overlay/loader-overlay.scss

@@ -0,0 +1,64 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-loader-overlay_parent {
+    position: relative;
+}
+
+.kbq-loader-overlay {
+    position: absolute;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    & .kbq-loader-overlay__container {
+        display: flex;
+        flex-direction: column;
+
+        justify-content: center;
+        align-items: center;
+
+        width: 80%;
+        max-width: 80%;
+    }
+
+    &.kbq-loader-overlay_fixed-top {
+        justify-content: unset;
+
+        & .kbq-loader-overlay__container {
+            margin-top: map.get($tokens, loader-overlay-size-fixed-top-padding);
+        }
+    }
+
+    &.kbq-loader-overlay_center:not(.kbq-loader-overlay_empty) .kbq-loader-overlay__container {
+        transform: translateY(map.get($tokens, loader-overlay-size-center-optical-compensation));
+    }
+}
+
+.kbq-loader-overlay-text {
+    margin-top: map.get($tokens, size-s);
+
+    max-width: map.get($tokens, loader-overlay-size-text-max-width);
+
+    text-align: center;
+}
+
+.kbq-loader-overlay-caption {
+    margin-top: map.get($tokens, size-3xs);
+
+    max-width: map.get($tokens, loader-overlay-size-text-max-width);
+
+    text-align: center;
+}

package/loader-overlay/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './loader-overlay.module';
+export * from './loader-overlay.component';

package/markdown/_markdown-theme.scss

@@ -0,0 +1,142 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin kbq-markdown-theme($theme) {
+    $tokens: map.get($theme, tokens);
+
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $markdown: map.get(map.get($theme, components), markdown);
+
+    .kbq-markdown {
+        color: map.get($foreground, text);
+        background: map.get($background, background);;
+
+        // h1, h2, h3, h4, h5, h6
+        @for $i from 1 through 6 {
+            .kbq-markdown__h#{$i} {
+                color: map.get($markdown, h#{$i}-color);
+            }
+        }
+
+        .kbq-markdown__p {
+            color: map.get($markdown, p-color);
+        }
+
+        .kbq-markdown__ul,
+        .kbq-markdown__ol {
+            color: map.get($markdown, list-color);
+        }
+
+        .kbq-markdown__blockquote {
+            color: map.get($markdown, blockquote-text);
+            background: map.get($markdown, blockquote-background);
+            border-color: map.get($markdown, blockquote-border);
+            border-left-color: map.get($markdown, blockquote-line);
+        }
+
+        .kbq-markdown__pre,
+        .kbq-markdown__p > .kbq-markdown__code {
+            color: map.get($markdown, code-text);
+            background-color: map.get($markdown, code-background);
+            border-color: map.get($markdown, code-border);
+        }
+
+        .kbq-markdown__a {
+            color: map.get($markdown, link-text);
+            border-bottom-color: map.get($markdown, link-border-bottom);
+
+            &:visited {
+                color: map.get($markdown, link-state-visited-text);
+                border-bottom-color: map.get($markdown, link-state-visited-border-bottom);
+            }
+
+            &:hover {
+                color: map.get($markdown, link-state-hover-text);
+                transition: color 0ms;
+                border-bottom-color: map.get($markdown, link-state-hover-border-bottom);
+            }
+
+            &:active {
+                color: map.get($markdown, link-state-active-text);
+            }
+
+            &:focus {
+                outline:
+                    map.get($markdown, link-state-focused-outline)
+                    solid
+                    map.get($tokens, markdown-link-size-state-focused-outline-width);
+
+                outline-offset: map.get($tokens, markdown-link-size-state-focused-outline-offset);
+            }
+        }
+
+        .kbq-markdown__img + em {
+            color: map.get($markdown, image-caption-text);
+        }
+
+        .kbq-markdown__hr {
+            border-bottom-color: map.get($markdown, hr-color);
+        }
+
+        .kbq-markdown__table > .kbq-markdown__thead {
+            color: map.get($markdown, table-header);
+            border-bottom-color: map.get($markdown, table-border);
+        }
+
+        .kbq-markdown__table > .kbq-markdown__tbody {
+            color: map.get($markdown, table-body);
+        }
+    }
+}
+
+@mixin kbq-markdown-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-markdown {
+        // h1, h2, h3, h4, h5, h6
+        @for $i from 1 through 6 {
+            .kbq-markdown__h#{$i} {
+                @include kbq-typography-level-to-styles($config, map.get($tokens, markdown-h#{$i}-font-default));
+            }
+        }
+
+        .kbq-markdown__p {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, markdown-p-font-default));
+        }
+
+        .kbq-markdown__ul,
+        .kbq-markdown__ol {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, markdown-list-font-default));
+        }
+
+        .kbq-markdown__blockquote > .kbq-markdown__p {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, markdown-blockquote-font-default));
+        }
+
+        .kbq-markdown__code {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, markdown-code-font-default));
+        }
+
+        .kbq-markdown__a {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, markdown-link-font-default));
+        }
+
+        .kbq-markdown__img + em {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, markdown-image-font-caption));
+        }
+
+        .kbq-markdown__table > .kbq-markdown__thead {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, markdown-table-font-header));
+        }
+
+        .kbq-markdown__table > .kbq-markdown__tbody {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, markdown-table-font-body));
+        }
+    }
+}

package/markdown/index.d.ts

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

package/markdown/markdown.component.d.ts

@@ -0,0 +1,19 @@
+import { AfterContentChecked, ChangeDetectorRef, ElementRef } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { KbqMarkdownService } from './markdown.service';
+import * as i0 from "@angular/core";
+export declare class KbqMarkdown implements AfterContentChecked {
+    private markdownService;
+    private sanitizer;
+    private cdr;
+    contentWrapper: ElementRef;
+    get markdownText(): string | null;
+    set markdownText(value: string | null);
+    private _markdownText;
+    resultHtml: SafeHtml;
+    constructor(markdownService: KbqMarkdownService, sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    ngAfterContentChecked(): void;
+    private getResultHTML;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMarkdown, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqMarkdown, "kbq-markdown", never, { "markdownText": { "alias": "markdownText"; "required": false; }; }, {}, never, ["*"], false, never>;
+}

package/markdown/markdown.module.d.ts

@@ -0,0 +1,11 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./markdown.component";
+import * as i2 from "@angular/common";
+import * as i3 from "@angular/cdk/a11y";
+import * as i4 from "@koobiq/components/core";
+import * as i5 from "@angular/forms";
+export declare class KbqMarkdownModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMarkdownModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqMarkdownModule, [typeof i1.KbqMarkdown], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.KbqCommonModule, typeof i5.FormsModule], [typeof i1.KbqMarkdown]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqMarkdownModule>;
+}

package/markdown/markdown.scss

@@ -0,0 +1,249 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-markdown {
+    display: block;
+
+    .markdown-input {
+        display: none;
+    }
+
+    .markdown-output {
+        flex: 1;
+    }
+
+    // h1, h2, h3, h4, h5, h6
+    @for $i from 1 through 6 {
+        .kbq-markdown__h#{$i} {
+            max-width: var(--kbq-markdown-h#{$i}-size-max-width, map.get($tokens, markdown-h#{$i}-size-max-width));
+            margin-top: var(--kbq-markdown-h#{$i}-size-margin-top, map.get($tokens, markdown-h#{$i}-size-margin-top));
+            margin-bottom: var(
+                --kbq-markdown-h#{$i}-size-margin-bottom, map.get($tokens, markdown-h#{$i}-size-margin-bottom)
+            );
+        }
+    }
+
+    .kbq-markdown__a {
+        display: inline-block;
+
+        text-decoration: none;
+        cursor: pointer;
+
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        transition: color ease-out 300ms;
+    }
+
+    .kbq-markdown__p {
+        max-width: var(--kbq-markdown-p-size-max-width, map.get($tokens, markdown-p-size-max-width));
+        margin-top: var(--kbq-markdown-p-size-margin-top, map.get($tokens, markdown-p-size-margin-top));
+        margin-bottom: var(--kbq-markdown-p-size-margin-bottom, map.get($tokens, markdown-p-size-margin-bottom));
+    }
+
+    .kbq-markdown__ul,
+    .kbq-markdown__ol {
+        max-width: var(--kbq-markdown-list-size-max-width, map.get($tokens, markdown-list-size-max-width));
+        margin-top: var(--kbq-markdown-list-size-margin-top, map.get($tokens, markdown-list-size-margin-top));
+        margin-bottom: var(--kbq-markdown-list-size-margin-bottom, map.get($tokens, markdown-list-size-margin-bottom));
+
+        > li {
+            margin-bottom: var(
+                --kbq-markdown-list-size-item-margin-bottom,
+                map.get($tokens, markdown-list-size-item-margin-bottom)
+            );
+        }
+    }
+
+    .kbq-markdown__ul {
+        position: relative;
+        list-style: none;
+        padding: var(--kbq-markdown-list-size-ul-padding, map.get($tokens, markdown-list-size-ul-padding));
+    }
+
+    .kbq-markdown__ul > li:before {
+        content: '—';
+        display: block;
+        position: absolute;
+        width: 24px;
+        text-align: left;
+        left: 0;
+    }
+
+    .kbq-markdown__ol {
+        //padding: var(--kbq-markdown-list-size-ol-padding, map.get($tokens, markdown-list-size-ol-padding));
+        list-style: none;
+        padding: 0;
+        counter-reset: li;
+
+        > li {
+            &:before {
+                content:counter(li) ".";
+                counter-increment: li;
+                padding-right: var(
+                    --kbq-markdown-list-size-ol-number-padding-right,
+                    map.get($tokens, markdown-list-size-ol-number-padding-right)
+                );
+            }
+
+            > * {
+                display: inline-block;
+            }
+        }
+    }
+
+    .kbq-markdown__p + .kbq-markdown__ul,
+    .kbq-markdown__p + .kbq-markdown__ol {
+        margin-top: var(
+            --kbq-markdown-list-size-margin-top-after-paragraph,
+            map.get($tokens, markdown-list-size-margin-top-after-paragraph)
+        );
+    }
+
+    .kbq-markdown__blockquote {
+        max-width: var(
+            --kbq-markdown-blockquote-size-max-width, map.get($tokens, markdown-blockquote-size-max-width)
+        );
+        margin-top: var(
+            --kbq-markdown-blockquote-size-margin-top, map.get($tokens, markdown-blockquote-size-margin-top)
+        );
+
+        margin-bottom: var(
+            --kbq-markdown-blockquote-size-margin-bottom, map.get($tokens, markdown-blockquote-size-margin-bottom)
+        );
+
+        border-left-width: var(
+            --kbq-markdown-blockquote-size-line-width, map.get($tokens, markdown-blockquote-size-line-width)
+        );
+
+        border-left-style: solid;
+
+        padding: var(
+            --kbq-markdown-blockquote-size-padding, map.get($tokens, markdown-blockquote-size-padding)
+        );
+
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .kbq-markdown__blockquote > .kbq-markdown__p {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    .kbq-markdown__pre {
+        position: relative;
+        overflow-x: auto;
+
+        margin-top: var(
+            --kbq-markdown-code-size-multiline-margin-top,
+            map.get($tokens, markdown-code-size-multiline-margin-top)
+        );
+        margin-bottom: var(
+            --kbq-markdown-code-size-multiline-margin-bottom,
+            map.get($tokens, markdown-code-size-multiline-margin-bottom)
+        );
+
+        padding: var(
+            --kbq-markdown-code-size-multiline-padding,
+            map.get($tokens, markdown-code-size-multiline-padding)
+        );
+    }
+
+    .kbq-markdown__pre,
+    .kbq-markdown__p > .kbq-markdown__code {
+        border-radius: var(
+            --kbq-markdown-code-size-border-radius, map.get($tokens, markdown-code-size-border-radius)
+        );
+        border-width: var(
+            --kbq-markdown-code-size-border-width, map.get($tokens, markdown-code-size-border-width)
+        );
+        border-style: solid;
+    }
+
+    .kbq-markdown__p > .kbq-markdown__code {
+        max-width: var(--kbq-markdown-code-size-max-width, map.get($tokens, markdown-code-size-max-width));
+        padding: var(--kbq-markdown-code-size-inline-padding, map.get($tokens, markdown-code-size-inline-padding));
+    }
+
+    .kbq-markdown__img {
+        max-width: var(--kbq-markdown-image-size-max-width, map.get($tokens, markdown-image-size-max-width));
+        margin-top: var(--kbq-markdown-image-size-margin-top, map.get($tokens, markdown-image-size-margin-top));
+        margin-bottom: var(
+            --kbq-markdown-image-size-margin-bottom, map.get($tokens, markdown-image-size-margin-bottom)
+        );
+
+        + em {
+            display: block;
+            margin-top: var(
+                --kbq-markdown-image-size-caption-margin-top, map.get($tokens, markdown-image-size-caption-margin-top)
+            );
+            margin-bottom: var(
+                --kbq-markdown-image-size-caption-margin-bottom,
+                map.get($tokens, markdown-image-size-caption-margin-bottom)
+            );
+        }
+    }
+
+    .kbq-markdown__hr {
+        border-top: none;
+        border-left: none;
+        border-right: none;
+        border-bottom-style: solid;
+        border-bottom-width: var(--kbq-markdown-hr-size-width, map.get($tokens, markdown-hr-size-width));
+        margin: var(
+            --kbq-markdown-hr-size-margin-vertical, map.get($tokens, markdown-hr-size-margin-vertical)
+        ) 0;
+    }
+
+    .kbq-markdown__table {
+        max-width: 100%;
+        overflow-x: auto;
+        display: table;
+        border-collapse: collapse;
+        margin-bottom: var(
+            --kbq-markdown-table-size-margin-bottom,
+            map.get($tokens, markdown-table-size-margin-bottom)
+        );
+
+        td {
+            vertical-align: top;
+        }
+
+        th, td {
+            padding: var(--kbq-markdown-table-size-padding, map.get($tokens, markdown-table-size-padding));
+            font-weight: 400;
+        }
+    }
+
+    .kbq-markdown__table > .kbq-markdown__thead {
+        border-bottom-style: solid;
+        border-bottom-width: var(
+            --kbq-markdown-table-size-border-width, map.get($tokens, markdown-table-size-border-width)
+        );
+
+        text-align: left;
+
+        th:first-child {
+            padding-left: 0;
+        }
+
+        th:last-child {
+            padding-right: 0;
+        }
+    }
+
+    .kbq-markdown__table > .kbq-markdown__tbody {
+        td:first-child {
+            padding-left: 0;
+        }
+
+        td:last-child {
+            padding-right: 0;
+        }
+    }
+}

package/markdown/markdown.service.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class KbqMarkdownService {
+    parseToHtml(markdown: string): string;
+    private transform;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqMarkdownService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<KbqMarkdownService>;
+}

package/markdown/markdown.values.d.ts

@@ -0,0 +1,3 @@
+export declare const MARKDOWN_TAGS_TO_CLASS_ALIAS: string[];
+export declare const MARKDOWN_WHOLE_TAGS_TO_CLASS_ALIAS: string[];
+export declare const CLASS_PREFIX: string;

package/markdown/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from './markdown.component';
+export * from './markdown.module';
+export * from './markdown.service';
+export * from './markdown.values';

package/modal/README.md

@@ -0,0 +1,34 @@
+The dialog is currently divided into 3 modes - `default`, `confirm box`, `custom`.
+
+
+#### Using service to create Confirm Mode
+
+```ts
+showConfirm() {
+    this.modalService.success({
+        mcContent   : 'Save changes made to the request "All assets with Windows"?',
+        mcOkText    : 'Save',
+        mcCancelText: 'Cancel',
+        mcOnOk      : () => console.log('OK')
+    });
+}
+```
+
+#### Using service to open modal Custom Mode
+
+```ts
+let dialogRef = modalService.open({
+    mcComponent: CustomComponent
+});
+```
+
+```ts
+@Component({/* ... */})
+export class CustomComponent {
+    constructor(private dialogRef: KbqModalRef) { }
+
+    closeDialog() {
+        this.modal.destroy({ data: 'this the result data' });
+    }
+}
+```