@koobiq/components 16.0.0-beta.8 → 17.0.0-beta.1

package/autocomplete/_autocomplete-theme.scss

@@ -5,17 +5,10 @@
 
 
 @mixin kbq-autocomplete-theme($theme) {
-    $foreground: map.get($theme, foreground);
+    $select-panel: map.get(map.get($theme, components), select-panel);
 
     .kbq-autocomplete-panel {
-        @include popup.popup-params($theme);
-
-        color: theming.kbq-color($foreground, text);
-
-        .kbq-selected {
-            $popup: map.get(map.get($theme, components), popup);
-
-            background-color: map.get($popup, background);
-        }
+        box-shadow: map.get($select-panel, shadow);
+        background: map.get($select-panel, background);
     }
 }

package/autocomplete/autocomplete.scss

@@ -23,11 +23,6 @@ $tokens: meta.module-variables(tokens) !default;
 
     max-height: var(--kbq-autocomplete-size-panel-max-height, map.get($tokens, autocomplete-size-panel-max-height));
 
-    border: {
-        width: 1px;
-        style: solid;
-    }
-
     border-bottom-left-radius: var(
         --kbq-autocomplete-size-panel-border-radius, map.get($tokens, autocomplete-size-panel-border-radius)
     );

package/badge/_badge-theme.scss

@@ -4,24 +4,29 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
-@mixin kbq-badge-filled-color($badge) {
+@mixin kbq-badge-style($badge) {
     color: map.get($badge, color);
     background: map.get($badge, background);
-    border: transparent;
 
     & .kbq-badge-caption {
         color: map.get($badge, caption);
     }
+
+    & .kbq-icon {
+        color: map.get($badge, icon) !important;
+    }
+}
+
+@mixin kbq-badge-filled-color($badge) {
+    @include kbq-badge-style($badge);
+
+    border: transparent;
 }
 
 @mixin kbq-badge-outline-color($badge) {
-    color: map.get($badge, color);
-    border-color: map.get($badge, border);
-    background: map.get($badge, background);
+    @include kbq-badge-style($badge);
 
-    & .kbq-badge-caption {
-        color: map.get($badge, caption);
-    }
+    border-color: map.get($badge, border);
 }
 
 @mixin kbq-badge-theme($theme) {
@@ -55,6 +60,10 @@
 
         $fade-off: map.get($filled, fade-off);
 
+        &.kbq-badge_theme {
+            @include kbq-badge-filled-color(map.get($fade-off, theme));
+        }
+
         &.kbq-badge_success {
             @include kbq-badge-filled-color(map.get($fade-off, success));
         }

package/badge/badge.component.d.ts

@@ -1,4 +1,5 @@
-import { KbqIconItem } from '@koobiq/components/icon';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, QueryList, Renderer2 } from '@angular/core';
+import { KbqIcon, KbqIconItem } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 export declare enum KbqBadgeColors {
     FadeContrast = "fade-contrast",
@@ -6,6 +7,7 @@ export declare enum KbqBadgeColors {
     FadeSuccess = "fade-success",
     FadeWarning = "fade-warning",
     FadeError = "fade-error",
+    Theme = "theme",
     Success = "success",
     Warning = "warning",
     Error = "error"
@@ -14,6 +16,23 @@ export declare class KbqBadgeCaption {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeCaption, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBadgeCaption, "[kbq-badge-caption]", never, {}, {}, never, never, false, never>;
 }
+export declare const getNodesWithoutComments: (nodes: NodeList) => Node[];
+export declare const leftIconClassName = "kbq-icon_left";
+export declare const rightIconClassName = "kbq-icon_right";
+export declare const badgeLeftIconClassName = "kbq-badge-icon_left";
+export declare const badgeRightIconClassName = "kbq-badge-icon_right";
+export declare class KbqBadgeCssStyler implements AfterContentInit {
+    private renderer;
+    private cdr;
+    icons: QueryList<KbqIcon>;
+    nativeElement: HTMLElement;
+    isIconButton: boolean;
+    constructor(elementRef: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef);
+    ngAfterContentInit(): void;
+    updateClassModifierForIcons(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeCssStyler, [null, null, { skipSelf: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBadgeCssStyler, "kbq-badge", never, {}, {}, ["icons"], never, false, never>;
+}
 export declare class KbqBadge {
     iconItem: KbqIconItem;
     compact: boolean;

package/badge/badge.component.scss

@@ -34,6 +34,20 @@ $tokens: meta.module-variables(tokens) !default;
             var(--kbq-badge-size-normal-content-padding, map.get($tokens, badge-size-normal-content-padding));
     }
 
+    & .kbq-icon_left {
+        margin-right: var(
+            --kbq-badge-size-normal-icon-left-margin-right,
+            map.get($tokens, badge-size-normal-icon-left-margin-right)
+        );
+    }
+
+    & .kbq-icon_right {
+        margin-left: var(
+            --kbq-badge-size-normal-icon-right-margin-left,
+            map.get($tokens, badge-size-normal-icon-right-margin-left)
+        );
+    }
+
     &.kbq-badge_compact {
         padding:
             var(--kbq-badge-size-compact-vertical-padding, map.get($tokens, badge-size-compact-vertical-padding))
@@ -51,5 +65,19 @@ $tokens: meta.module-variables(tokens) !default;
             padding-left:
                 var(--kbq-badge-size-compact-content-padding, map.get($tokens, badge-size-compact-content-padding));
         }
+
+        & .kbq-icon_left {
+            margin-right: var(
+                --kbq-badge-size-compact-icon-left-margin-right,
+                map.get($tokens, badge-size-compact-icon-left-margin-right)
+            );
+        }
+
+        & .kbq-icon_right {
+            margin-left: var(
+                --kbq-badge-size-compact-icon-right-margin-left,
+                map.get($tokens, badge-size-compact-icon-right-margin-left)
+            );
+        }
     }
 }

package/badge/badge.module.d.ts

@@ -5,6 +5,6 @@ import * as i3 from "@angular/cdk/a11y";
 import * as i4 from "@angular/cdk/platform";
 export declare class KbqBadgeModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqBadgeModule, [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqBadgeModule, [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption, typeof i1.KbqBadgeCssStyler], [typeof i2.CommonModule, typeof i3.A11yModule, typeof i4.PlatformModule], [typeof i1.KbqBadge, typeof i1.KbqBadgeCaption, typeof i1.KbqBadgeCssStyler]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqBadgeModule>;
 }

package/button/_button-base.scss

@@ -42,7 +42,7 @@ $tokens: meta.module-variables(tokens) !default;
         outline: none;
     }
 
-    &[disabled] {
+    &.kbq-disabled {
         cursor: default;
     }
 

package/button/_button-theme.scss

@@ -25,18 +25,17 @@
 
     @include _icon(map.get($params, left-icon), map.get($params, right-icon));
 
-    &:hover:not([disabled]),
-    &.kbq-hover:not([disabled]) {
+    &:hover:not(.kbq-disabled),
+    &.kbq-hover:not(.kbq-disabled) {
         background: map.get($params, states_hover_background);
     }
 
-    &:active:not([disabled]),
-    &.kbq-active:not([disabled]) {
+    &:active:not(.kbq-disabled),
+    &.kbq-active:not(.kbq-disabled) {
         background: map.get($params, states_active_background);
     }
 
-    &.kbq-disabled,
-    &[disabled] {
+    &.kbq-disabled {
         color: map.get($params, states_disabled_foreground);
         background: map.get($params, states_disabled_background);
 
@@ -44,27 +43,24 @@
     }
 }
 
-@mixin kbq-outline-button($params, $include-icons: true) {
+@mixin kbq-outline-button($params) {
     border-color: map.get($params, border);
     color: map.get($params, foreground);
     background: map.get($params, background);
 
-    @if $include-icons {
-        @include _icon(map.get($params, left-icon), map.get($params, right-icon));
-    }
+    @include _icon(map.get($params, left-icon), map.get($params, right-icon));
 
-    &:hover:not([disabled]),
-    &.kbq-hover:not([disabled]) {
+    &:hover:not(.kbq-disabled),
+    &.kbq-hover:not(.kbq-disabled) {
         background: map.get($params, states_hover_background);
     }
 
-    &:active:not([disabled]),
-    &.kbq-active:not([disabled]) {
+    &:active:not(.kbq-disabled),
+    &.kbq-active:not(.kbq-disabled) {
         background: map.get($params, states_active_background);
     }
 
-    &.kbq-disabled,
-    &[disabled] {
+    &.kbq-disabled {
         border-color: map.get($params, states_disabled_border);
         color: map.get($params, states_disabled_foreground);
 
@@ -79,18 +75,17 @@
 
     @include _icon(map.get($params, left-icon), map.get($params, right-icon));
 
-    &:hover:not([disabled]),
-    &.kbq-hover:not([disabled]) {
+    &:hover:not(.kbq-disabled),
+    &.kbq-hover:not(.kbq-disabled) {
         background: map.get($params, states_hover_background);
     }
 
-    &:active:not([disabled]),
-    &.kbq-active:not([disabled]) {
+    &:active:not(.kbq-disabled),
+    &.kbq-active:not(.kbq-disabled) {
         background: map.get($params, states_active_background);
     }
 
-    &.kbq-disabled,
-    &[disabled] {
+    &.kbq-disabled {
         border-color: map.get($params, states_disabled_border);
         color: map.get($params, states_disabled_foreground);
 
@@ -132,6 +127,12 @@
 
                 @include kbq-outline-button($outline-theme-fade-on);
             }
+
+            &.kbq-contrast-fade {
+                $outline-contrast-fade-on: map.get(map.get($button, outline), contrast-fade-on);
+
+                @include kbq-outline-button($outline-contrast-fade-on);
+            }
         }
 
         &.kbq-button_transparent {
@@ -156,22 +157,6 @@
             }
         }
     }
-
-    .kbq-button_outline {
-        $outline-contrast-fade-on: map.get(map.get($button, outline), contrast-fade-on);
-
-        &.kbq-button {
-            &.kbq-contrast-fade {
-                @include kbq-outline-button($outline-contrast-fade-on);
-            }
-        }
-
-        &.kbq-button-icon {
-            &.kbq-contrast-fade {
-                @include kbq-outline-button($outline-contrast-fade-on, $include-icons: false);
-            }
-        }
-    }
 }
 
 @mixin kbq-button-typography($config) {

package/checkbox/_checkbox-theme.scss

@@ -15,8 +15,13 @@
 
 @mixin kbq-checkbox-color($checkbox) {
     $default: map.get($checkbox, default);
+
     @include kbq-checkbox-state($default);
 
+    .kbq-checkbox-label {
+        color: map.get($default, text);
+    }
+
     .kbq-checkbox__frame {
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
@@ -82,26 +87,24 @@
         & .kbq-hint .kbq-hint__text {
             color: map.get($disabled, caption);
         }
+
+        .kbq-checkbox-label {
+            color: map.get($disabled, text);
+        }
     }
 }
 /* stylelint-enable no-descending-specificity */
 
 @mixin kbq-checkbox-theme($theme) {
-    $foreground: map.get($theme, foreground);
-
     $checkbox: map.get(map.get($theme, components), checkbox);
 
     $checkbox-theme: map.get($checkbox, theme);
     $checkbox-error: map.get($checkbox, error);
 
     .kbq-checkbox {
-        color: map.get($foreground, contrast);
-
         @include kbq-checkbox-color($checkbox-theme);
 
         &.kbq-error {
-            color: map.get($foreground, contrast);
-
             @include kbq-checkbox-color($checkbox-error);
         }
     }

package/checkbox/checkbox.scss

@@ -14,17 +14,12 @@ $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;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     box-sizing: border-box;
     pointer-events: none;
@@ -36,6 +31,9 @@ $tokens: meta.module-variables(tokens) !default;
         width: var(--kbq-checkbox-size-normal-border-width, map.get($tokens, checkbox-size-normal-border-width));
         style: solid;
     }
+
+    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__layout {

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

@@ -5,13 +5,49 @@
 @use '../core/styles/typography/typography-utils' as *;
 
 
+@mixin kbq-code-block-style($style) {
+    $container: map.get($style, container);
+    $actionbar: map.get($style, actionbar);
+    $collapse: map.get($style, collapse);
+
+    border-color: map.get($container, border);
+    background: map.get($container, background);
+
+    & .kbq-tab-header {
+        $header: map.get($style, header);
+        background: map.get($header, background) !important;
+    }
+
+    &:not(.kbq-code-block_no-header) .kbq-code-block__code {
+        box-shadow: map.get($container, shadow);
+    }
+
+    &.kbq-code-block_no-header {
+        & .kbq-code-block__fade-gradient {
+            display: block;
+
+            background: map.get($actionbar, fade-gradient)
+        }
+    }
+
+    & .kbq-code-block-actionbar {
+        background: map.get($actionbar, background);
+    }
+
+
+    & .kbq-code-block__show-more_expanded {
+        background: map.get($collapse, expanded-background);
+    }
+
+    & .kbq-code-block__show-more_collapsed {
+        background: map.get($collapse, collapsed-background);
+    }
+}
+
 @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);
 
@@ -282,12 +318,12 @@
             }
         }
 
-        &.kbq-code-block_less-contrast {
-            background-color: map.get($code-block, main-background-less-contrast);
+        &.kbq-code-block_outline {
+            @include kbq-code-block-style(map.get($code-block, outline));
         }
 
-        .kbq-tab-group:after {
-            background: map.get($code-block, border);
+        &.kbq-code-block_filled {
+            @include kbq-code-block-style(map.get($code-block, filled));
         }
 
         .kbq-tab-header {
@@ -298,7 +334,6 @@
         }
 
         .kbq-code-block__show-more {
-            border-top-color: map.get($code-block, border) !important;
         }
     }
 
@@ -326,9 +361,5 @@
                 font: inherit;
             }
         }
-
-        .hljs-ln-numbers {
-            @include kbq-typography-level-to-styles($config, caption-mono);
-        }
     }
 }

package/code-block/actionbar.component.scss

@@ -13,12 +13,40 @@ $tokens: meta.module-variables(tokens) !default;
 
     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);
+    top: 0;
+    right: 0;
+
+    padding:
+        var(
+            --kbq-code-block-size-actionbar-padding-vertical,
+            map.get($tokens, code-block-size-actionbar-padding-vertical)
+        )
+        var(
+            --kbq-code-block-size-actionbar-padding-horizontal,
+            map.get($tokens, code-block-size-actionbar-padding-horizontal)
+        );
+
+    gap: var(
+        --kbq-code-block-size-actionbar-content-gap-horizontal,
+        map.get($tokens, code-block-size-actionbar-content-gap-horizontal)
+    );
+
+    & .kbq-code-block__fade-gradient {
+        display: none;
+
+        width: var(
+            --kbq-code-block-size-actionbar-fade-gradient-width,
+            map.get($tokens, code-block-size-actionbar-fade-gradient-width)
+        );
+        height: 40px;
+
+        margin-top: calc(
+            var(
+                --kbq-code-block-size-actionbar-padding-vertical,
+                map.get($tokens, code-block-size-actionbar-padding-vertical)
+            ) * -1
+        );
+    }
 
     &.kbq-actionbar-block_floating {
         top: map.get($tokens, code-block-size-actionbar-margin-top);

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

@@ -44,7 +44,7 @@ export declare class KbqCodeBlockComponent implements OnDestroy {
     tabGroup: KbqTabGroup;
     lineNumbers: boolean;
     codeFiles: KbqCodeFile[];
-    lessContrast: boolean;
+    filled: boolean;
     maxHeight: number;
     softWrap: boolean;
     get noHeader(): any;
@@ -70,5 +70,5 @@ export declare class KbqCodeBlockComponent implements OnDestroy {
     private updateMultiline;
     private getFullFileName;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCodeBlockComponent, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["kbqCodeBlock"], { "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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCodeBlockComponent, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; }; "codeFiles": { "alias": "codeFiles"; "required": false; }; "filled": { "alias": "filled"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "softWrap": { "alias": "softWrap"; "required": false; }; }, {}, never, never, false, never>;
 }